4

我正在使用以下代码段来呈现列表：

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

methods: {
    myhandler(e){
        // Event target may be a button element.
        let target = e.target;
        // …
        // Let's assume we know 'target' is a button element instance.
        // I wish I could have access to the v-for item ("task") which is associated in some ways to the button that was clicked.
        // let the_task_reference = ?;
    }…

有没有一种干净的方法可以让我达到v-for与该按钮相关的范围特定任务？
谢谢你。

4

2 回答 2

1

另一种方法是将任务的索引存储在按钮上。

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

例子。

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

不建议

有一个隐藏属性，__vue__添加到 Vue 和 Component 根元素中。如果您对组件进行迭代，您将能够执行类似于此示例中的操作。

我不会推荐这种方法，因为它严重依赖 Vue 内部结构，可能会随着版本的变化而变化，但它现在就在那里。

于 2017-05-11T17:53:32.480 回答
0

最直接的解决方案是将事件处理程序放在与指令相同div的位置，然后传入变量：v-fortask

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

如果您确实需要在父元素上使用事件处理程序，您可以通过组件属性跟踪单击的任务，并使用v-for指令向 div 添加额外的单击处理程序：

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

您需要添加一个clickedTask属性：

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

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

于 2017-05-11T16:41:28.960 回答