Javascript vuejs component in for loop

Question

У меня есть v-for цикл в 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.

Возможно, есть более простой способ для этого?

Благодарим за помощь.

Answer 1

Поскольку вы используете v-for, так что вы можете восстановить index пунктов в invoice.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 
    }, 
}