VueJs, call a method from concatenated element - vue.js

Question

I would like to call a method from a concatenated checkbox.
here is my code:
methods: {
listServices(serviceId) {
axios
.get(
process.env.ROOT_API + "Service/List?Id=" + serviceId,
this.$store.getters.getTokenHeaderFormData
)
.then(response => {
response.data.forEach(el => {
this.dataset.push([
el.serviceName,
`<input type="checkbox"
onchange="${this.updateService(el.ServiceId)}">` // <-- Call UpdateService method
]);
});
})
.catch(error => {
console.log(error);
});
},
updateService(serviceId){
console.log(serviceId);
},
The onchange="${this.updateService(el.ServiceId)}" does not work. how can I do this?

Answer 1

The proper way to do this is to use v-for:
<template>
<ul>
<li v-for="item in dataset" :key="item[1]">
<input type="checkbox" #change="updateService(item[1])">
</li>
</ul>
</template>
<script>
export default
{
methods:
{
listServices(serviceId)
{
axios.get(
process.env.ROOT_API + "Service/List?Id=" + serviceId,
this.$store.getters.getTokenHeaderFormData
).then(response =>
{
response.data.forEach(el =>
{
this.dataset.push([
el.serviceName,
el.ServiceId
]);
});
}).catch(error =>
{
console.log(error);
});
},
updateService(serviceId)
{
console.log(serviceId);
},
}
}
</script>