2017-02-14 113 views
0

我在vuejs中有一個v-for循環,它在每次迭代中顯示一個組件。這是一個自動完成組件,當用戶在輸入框中鍵入內容時,該組件會搜索並顯示產品名稱。for循環中的Javascript vuejs組件

我在每個組件上都有一個@change="setProduct"屬性,它可以在我的父組件中正確調用我的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的反模式。

也許有一個更簡單的方法讓我去做這件事?

感謝您的幫助。

+0

你應該能夠在'setProduct'中傳遞一個產品或索引的id,或者通過其他方式來識別,你可以添加一些相關的代碼給我們更多的想法。 – Saurabh

回答

0

由於您使用v-for,所以實際上你可以檢索項的indexinvoice.InvoiceLines,你可以通過任何你想成爲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(line, i, $event)"></auto-complete> 
     </div> 
     ... 
    </div> 
</template> 

然後在JavaScript:

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