I am currently working on a situation where I need to dynamically assign methods to elements that are being generated by a template using a v-for loop. These methods will be assigned based on the value of a particular variable, specifically the 'btn.method' variable in this case. Is it actually feasible to achieve this?
var formButtons = new Vue({
el: "#formButtons",
data: {
buttons: [
{
id: "login",
text: "Login",
method: "submitForm"
},
{
id: "cancel",
text: "Cancel",
method: "clearForm"
}
]
},
methods: {
submitForm: function (event) {
// Some Code
},
clearForm: function (event) {
// Some Code
}
},
template: `
<div>
<div class="form-group" v-for='btn in buttons'>
<button
v-bind:id='btn.id'
v-on:click='btn.method'
>
{{ btn.text }}
</button>
</div>
</div>
`
});
Previously, I tried passing the method name as a string but encountered an error message stating, "TypeError: e.apply is not a function.".
My goal is to have each button associated with its own specific method, for instance:
- Login button => submitForm method
- Cancel button => clearForm method