从计算函数的 getter 中引用 v-for 元素

Posted 2023-02-23

【中文标题】从计算函数的 getter 中引用 v-for 元素

【英文标题】：referring to a v-for element from inside a getter of computed function

【发布时间】：2019-03-26 04:19:53

【问题描述】：

在 Vue 中，我有一个 v-for 循环，它根据我拥有的对象呈现输入。 输入是一个 v-model 到一个计算函数：

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

因此，带有 get 和 setter 的计算函数：

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

问题是get() 中的this.product 未定义。

有没有办法在计算函数的getter中引用v-for的动态变量？

【问题讨论】：

VueJS How can I use computed property with v-for的可能重复

【参考方案1】：

如果您想使用 computed 属性，您应该创建一个子组件并将产品作为属性传递 (<Procuct v-for="p in products" :product="p"/>)。

或者，如果它不是一项昂贵的操作，您可以轻松地将 computed 替换为 method 并使用它：

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