Vue.js 将处理程序的对象传递给v-on和访问方法

我有一个

v-for

循环，在这个循环中，我根据数据建立了一行按钮。我还动态地将处理程序绑定到它们，这是我正在努力解决的部分

<component
  is="button.component"
  v-for="(button, index) in group"
  :key="index"
  v-on="button.handlers"
>
  Text
</component>

Vue抱怨字符串

'update（value）

不是一个函数，但我不知道如何获得与

v-on:click=“update（button.value）”

等效的函数，该函数将在模板中工作。

---

关于如何解决这个问题，有什么想法吗？

在对象中使用

v-on

引入了一些限制，无法编译“update（button.value）”字符串并使用本地

button.value

value，因为它是在模板之外定义的

可以使用类似于

v-on

的自定义指令提供此功能

否则，所有必要的数据都需要提供给具有helper函数的处理程序：

<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 }
      }
    ]
  }
}

...
方法：{
映射处理程序（按钮、数据）{
让RemappedHandler={}；
for（让eventName进入button.handlers）{
let handler=button.handlers[eventName]；
remappedHandlers[eventName]=e=>handler（e，数据）；
}
返回重新映射的句柄；
},
更新（e，{value}）{…}
},
数据（）{
返回{
组：[
{
值：“foo”，
处理程序：{单击：this.update}
}
]
}
}

您能否详细介绍一下处理程序的动态特性？有很多不同的方法来解决这个问题，但是很难从你给出的例子中知道应该采取哪种方法。了解您实际想做什么会很有用。@Skille我用一个更复杂的例子更新了这个问题，这个例子应该说明动态事件是如何用于交互的！不幸的是，我改变了问题a，但由于一个评论。然而，这个答案似乎是正确的！我懂了。是的，它可以工作，您可以访问uploadFile中的整个

e

对象，或者如果uploadFile参数由于某种原因受到限制，则创建另一个包装函数，

change:（{files}）=>uploadFile（files）

<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 }
      }
    ]
  }
}