Javascript vuejs Komponente in for Schleife

Question

Ich habe eine v-for-Schleife in vuejs, die eine Komponente bei jeder Iteration anzeigt. Dies ist eine Autocomplete-Komponente, die Produktnamen sucht und anzeigt, wenn ein Benutzer das Eingabefeld eingibt.

Ich habe ein @change="setProduct" Attribut für jede Komponente, die korrekt meine setProduct Methode in meiner übergeordneten Komponente aufruft.

Aber wie kann ich wissen, welche Komponente aktualisiert wurde? Alles, was an die Methode setProduct übergeben wird, sind die Details des Produkts, das ausgegeben wurde, aber ich weiß nicht, welche Komponente das Ereignis ausgegeben hat, um zu wissen, welche Zeile zu aktualisieren ist.

---

Hier sind einige relevante Code: Diese in der übergeordneten Komponente ist

<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> 

Die Komponente an einen Benutzer reagiert eine Auswahl in einem Drop-Down-klicken und dann Fragen emittieren $ (‚change‘, Produkt);

Die Komponente hat keine Kenntnis von der übergeordneten Komponente, daher weiß sie nicht, auf welche Rechnungszeile sie sich bezieht. Ich könnte den Index in die Kind-Komponente übergeben und dann wieder zurückgeben, aber das scheint Anti-Muster für Vue.

Vielleicht gibt es einen einfacheren Weg für mich, dies zu tun?

Danke für Ihre Hilfe.

Answer 1

Da Sie v-for verwenden, so dass Sie tatsächlich die index der Elemente in invoice.InvoiceLines abrufen können, und Sie können unabhängig von Ihrem Mangel in setProduct passieren:

<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> 

Dann in 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 
    }, 
}