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>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>