forループのJavascript vuejsコンポーネント

Question

私は各繰り返しでコンポーネントを表示するvuejsにv-forループを持っています。これは、ユーザーが入力ボックスに入力すると製品名を検索して表示するオートコンプリートコンポーネントです。

親コンポーネントのsetProductメソッドを正しく呼び出す各コンポーネントに@change="setProduct"という属性があります。

しかし、どのコンポーネントが更新されたのかわかりますか？ setProductメソッドに渡されるものはすべて、発行された製品の詳細ですが、更新する行を知るためにどのコンポーネントがイベントを発行したのかわかりません。

---

ここ

は、いくつかの関連するコードです： これは、親コンポーネントに

<template> 
    <div class="row" v-for="line, i in invoice.InvoiceLines"> 
     <div class="col-xs-5"> 
      <auto-complete :list="productList" :value="line.Product.name" @change="setProduct"></auto-complete> 
     </div> 
     ... 
    </div> 
</template> 
<script> 
export default { 
    data() { 
     return { 
      invoice:{}, 
      productList:[] 
     }, 
    } 
    methods:{ 
     setProduct(product){ 
      //product has the details of the new product that was selected. But I don't know which invoice line it is referring to. 
     }, 
    } 
} 
</script> 

あるコンポーネントがドロップダウンで選択をクリックして、ユーザーに応答して、放出する$（「変更」を発行し、製品）;

コンポーネントには親コンポーネントに関する知識がないため、参照する請求書の行はわかりません。私は、子コンポーネントにインデックスを渡すことができますし、それを戻して渡すが、それはvueのための反パターンと思われる。

多分私はこれについて簡単に行く方法がありますか？

ありがとうございました。

Answer 1

あなたが実際にinvoice.InvoiceLines内の項目のindexを取得することができますし、setProductに何でもあなたの希望を渡すことができますので、あなたが、v-forを使用しているので：JavaScriptで次に

<template> 
    <div class="row" v-for="(line, i) in invoice.InvoiceLines"> 
     <div class="col-xs-5"> 
      <auto-complete 
       :list="productList" 
       :value="line.Product.name" 
       @change="setProduct(line, i, $event)"></auto-complete> 
     </div> 
     ... 
    </div> 
</template> 

：

methods: { 
    setProduct(product, index, event){ 
     // product - the 'line' responsible in invoice.InvoiceLines 
     // index - the index of line in invoice.InvoiceLines 
     // event - the event object 
    }, 
}