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

最もストレートフォワードソリューションはv-forディレクティブと同じdivにイベントハンドラを入れて、ちょうど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経由でタスクを参照することができます。