Vuejs - 事件代表團和v-的

Question

我使用下面的片段來呈現一個列表上下文參考：

<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範圍的具體任務與那個按鈕有關？
謝謝。

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

Example。

如果你有像id這樣更強大的東西，那會更好。

不推薦

有隱藏屬性，被添加到的Vue和組分根元素__vue__。如果你迭代一個組件，你將能夠做一些事情like in this example。

我不會推薦這種方法，因爲它很大程度上依賴於Vue內部結構，它可能會隨着版本的不同而改變，但它今天就在那裏。

Answer 2

最直接的解決辦法是把事件處理程序在同一div爲v-for指令，只是通過在task變量：

<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參閱任務。