vue.jsv-for

In Vue.js, how can I add additional parameters alongside an emit?


I have a series of components being created using 'v-for' on an array. When I send a custom $emit and catch it in my parent, how am I able to also pass the array item alongside all the $emit variables to a function?

Parent Component

<ProductEntry 
    @update-price="updatePrice" 
    v-for="product in productList"
        :product-description="product.description"
        :product-amount="product.amount"
        :product-price="product.price">
</ProductEntry>

Child Component

<GrowingTextArea id="priceCol" @input-update="updatePrice" />

When I catch using @update-price, how can I also pass the specific 'product' object so I can also alter the contents of that specific product in productList?

I have tried finding ways to extract variables from an emit, but everything has told me to call the function directly and not specified how to add additional parameters. I'm still quite new to Vue and webdev in general so maybe I am missing something obvious?

Thank you for any and all help.

SOLUTION:

So after doing a bit more thorough research I found the solution. The payload from the $emit is being stored in $event so the following allows me to pass the $emit parameters alongside the referenced product object:

<ProductEntry 
    @update-price="updatePrice($event,product)" 
    v-for="product in productList"
        :product-description="product.description"
        :product-amount="product.amount"
        :product-price="product.price">
</ProductEntry>

Solution

  • <ProductEntry 
        @update-price="updatePrice($event,product)" 
        v-for="product in productList"
            :product-description="product.description"
            :product-amount="product.amount"
            :product-price="product.price">
    </ProductEntry>