I am using vuejs. I want a this method to get triggered whenever anything with a specific class is clicked. I am having trouble setting it up in vuejs, but had it working correctly with vanilla js. Please take a look

new Vue({
  el: "#app",
  data: {
 
  },
  methods: {
 handleTileClick: function(){
  alert("You have got mail")

window.top.$("body").append(`<div>My Div goes here!</div>`);


const tiles = document.querySelectorAll(".carousel-cell-card")

tiles.forEach(tile => tile.addEventListener('click', handleTileClick))
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <p class="carousel-cell-card">
  my friend bob
  </p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to initialize the listeners in the mounted section

new Vue({
  el: "#app",
  mounted() {
   const tiles = document.querySelectorAll(".carousel-cell-card");
   tiles.forEach(tile => tile.addEventListener('click', this.handleTileClick))
  },
  methods: {
   handleTileClick(){
     alert("You have got mail");
     //window.top.$("body").append(`<div>My Div goes here!</div>`); // This statement has to be debugged
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <p class="carousel-cell-card">
  my friend bob
  </p>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>