referring to a v-for element from inside a getter of computed function

Question

In Vue, I have a v-for loop that renders an input according to an object I have. The input is with a v-model to a computed function:

<template v-for="product in products>"
  {{ product.Name }}: <input type="text" v-model="productAmount">
</template>

and accordingly, the computed function with get and setter:

computed: {
  productAmount: {
    get () {
      this.product.DefaultAmount
    },
    set (newAmount) {
      // doing something
    }
  }
}

The problem is that this.product in get() is undefined.

Is there a way to refer to a dynamic variable of v-for inside the getter of the computed function?

Possible duplicate of [VueJS How can I use computed property with v-for](https://stackoverflow.com/questions/40322404/vuejs-how-can-i-use-computed-property-with-v-for) — Traxo, Oct 22 '18 at 06:30

score 0 · Answer 1 · answered Oct 24 '18 at 10:59

If you want to use a computed property you should create a child component and pass the product as a property (<Procuct v-for="p in products" :product="p"/>).

Alternatively if it is not an expensive operation you could easily replace the computed with a method instead though and use that:

...
methods: {
  getAmountForProduct(product) {
    return product.DefaultAmount
  }
}

referring to a v-for element from inside a getter of computed function

1 Answers1