CODEWITHSUNDEEP
vue.js
Vzupo
Vzupo

Reputation: 1478

triggering click event from class in vuejs

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>

Upvotes: 2

Views: 1796

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

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>

Upvotes: 1

Related Questions