passing object of handlers to v-on and accessing methods - vue.js

Question

I have a v-for loop in which I build up a row of buttons from my data. I also dynamically bind handlers to them and here is the part I am struggling with.
<component
is="button.component"
v-for="(button, index) in group"
:key="index"
v-on="button.handlers"
>
Text
</component>
As you can see, I pass button.handlers to the v-on function. My data looks like this:
data: {
group: [
{
component: BButton
value: 'foo',
handlers: { click: 'update(button.value)' }
},
{
component: CustomFilePickerButton
value: 'bar',
handlers: { change: 'uploadFile($event.files)' }
}
]
}
Vue complains that the string 'update(value)' is not a function but I dont know how I can get the equivalent to v-on:click="update(button.value)" which would work in the template.
Any ideas on how to solve this?

Answer 1

The use of v-on with object introduces limitations, 'update(button.value)' string cannot be compiled and make use of local button.value value because it's defined outside the template.
It would be possible to provide this functionality with custom directive similar to v-on.
Otherwise all necessary data needs to be provided to handlers with helper function:
<button
v-for="(button, index) in group"
:key="index"
v-on="mapHandlers(button, { value: button.value })"
>
...
methods: {
mapHandlers(button, data) {
let remappedHandlers = {};
for (let eventName in button.handlers) {
let handler = button.handlers[eventName];
remappedHandlers[eventName] = e => handler(e, data);
}
return remappedHandlers;
},
update(e, { value }) { ... }
},
data () {
return {
group: [
{
value: 'foo',
handlers: { click: this.update }
}
]
}
}