Vuejs2 Vuejs-事件委派和v-for上下文参考

我使用以下代码片段呈现列表：

{{task.caption}
{{task.callableName}

方法：{
myhandler（e）{
//事件目标可以是按钮元素。
设target=e.target；
// …
//假设我们知道“target”是一个按钮元素实例。
//我希望我能够访问v-for项（“任务”），它以某种方式与单击的按钮相关联。
//让_任务_引用=？；
}…

是否有一种干净的方法，使我能够访问与该按钮相关的范围特定任务的

v-for

---

谢谢。

最直接的解决方案是将事件处理程序放在与

v-for

指令相同的

div

上，只需传入

任务

变量：

<div 
  class="tasks" 
  v-for="(task, subName) in step.tasks"
  @click.prevent="myhandler(task, $event)"
>
  <button type="button">{{ task.caption }}</button>
  <span>{{ task.callableName }}</span>
</div>

您需要添加一个

clickedTask

属性：

data() {
  return {
    clickedTask: null,
  }
}

---

然后在处理程序中，您可以通过

此按钮引用任务。单击任务
另一种方法是将任务索引存储在按钮上

<div class="tasks" v-for="(task, index) in step.tasks">
    <button type="button" :data-index="index">
        {{ task.caption }}
    </button>
    <span> {{ task.callableName }} </span>
</div>


如果你有像
id
这样更强大的东西，那就更好了

不推荐使用

有一个隐藏属性，
\uuuu vue\uuuu
，添加到vue和组件根元素中。如果要在组件上迭代，您将能够执行一些操作

我不推荐这种方法，因为它严重依赖于Vue的内部结构，这些内部结构可能会随着版本的变化而变化，但现在已经存在了。
谢谢你，但我知道。正如我提到的，我需要在这里使用事件委派。换句话说，我希望第一个共同祖先来处理事件，这意味着我需要一种方法来引用当我只能访问作为事件目标的button元素时，任务对象。@Stphane无法从其作用域之外的事件直接访问
task
变量。您需要设置一个额外的引用。请参阅我的更新我认为vue实例上的某些隐藏属性会有所帮助，但似乎没有存在。我担心您的最终解决方案会导致太多开销。首先，因为在每个v-for div元素上仍然会注册一个click处理程序（这是我首先要避免的）第二，需要一个新的代理数据。我会挖进去，让你知道我的结局。再一次，谢谢你。这就是我所想的。我可能会去寻找它，因为似乎没有其他好的选择。我会让这个问题再多活一天，并把你的答案当作解决方案。谢谢。
<div class="tasks" v-for="(task, index) in step.tasks">
    <button type="button" :data-index="index">
        {{ task.caption }}
    </button>
    <span> {{ task.callableName }} </span>
</div>

myhandler(evt){
  const task = this.step.tasks[evt.target.dataset.index]
  ...
}