JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<div v-html="bullshitHTML" @click="onClick"></div>
</div>
JavaScript
new Vue({
el: '#app',
data: () => ({
bullshitHTML: '',
}),
methods: {
onClick(e) {
if (e.target.tagName === 'BUTTON') {
const id = e.target.closest('.product').dataset.id;
alert(id);
}
},
},
mounted() {
setTimeout(() => this.bullshitHTML = `
<div class="product" data-id="69">
<button>hello, world!!</button>
</div>
<div class="product" data-id="187">
<button>fuck the world</button>
</div>
<div class="product" data-id="666">
<button>fuck everything</button>
</div>
`, 500);
},
});