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的反模式。
也許有一個更簡單的方法讓我去做這件事?
感謝您的幫助。
你應該能夠在'setProduct'中傳遞一個產品或索引的id,或者通過其他方式來識別,你可以添加一些相關的代碼給我們更多的想法。 – Saurabh