Currently, I am facing an issue where I am trying to dynamically generate HTML in a Vue.js component. While I have successfully rendered the HTML, I am struggling to connect the events for these dynamically generated elements. To illustrate this problem, I have put together a simple example which may appear overly complicated but is just a snippet of a larger project. You can view the example on this JSFiddle, and here is the code:
new Vue({
el: '#app',
data: {
items: [
{
name:'Item 1',
isHtml:true,
mold: function() {
return '<button @click="onButtonOneClick">click</button>';
}
},
{
name: 'Item 2',
isHtml: false
},
{
name:'Item 3',
isHtml: true,
mold: function() {
return '<button @click="onButtonThreeClick">click</button>';
}
}
]
},
methods: {
getHtml: function(i) {
return i.mold();
},
onButtonOneClick: function() {
alert('First Item Clicked');
},
onButtonThreeClick: function() {
alert('Third Item Clicked')
}
}
})
Upon running this fiddle, you will observe that the buttons are displayed correctly on the screen. However, the associated click events do not trigger when the buttons are clicked. It seems like the HTML might not be fully compiled, at least based on my observation using Chrome Dev Tools.
I am seeking guidance on how to properly set up events for dynamically generated HTML within a Vue.js component.