将索引传递给vuejs中父组件中的子事件侦听器

Question

我在v-for循环中有一个对象列表：

<div v-for="(element, index) in myArray">
    <child @event-fired="handleEvent(index, dataFromChild)"></child>
</div>

现在，我想从子组件中触发事件后，在我的handleEvent方法上，传递子组件的索引和数据。

但是，现在，如果我执行上述操作，则会在控制台上显示错误，提示property or method dataFromChild is not defined....

Answer 1

您可以在事件处理程序中绑定箭头函数表达式。例如

<child @event-fired="dataFromChild => handleEvent(index, dataFromChild)"/>

JSFiddle演示（来自Vue样板）〜https://jsfiddle.net/zmxksv35/

Answer 2

只需将所有内容作为单个对象传递到事件处理程序中即可。

<div v-for="(element, index) in myArray">
    <child @event-fired="data => handleEvent({ index, data })"></child>
</div>

然后，在事件处理程序中，您可以对其进行解构：

handleEvent({ index, data }) {
    // handle the event
}