Vue.js 从Vue2中的可变输入字段数更新输入字段总数

我有数量可变的输入字段，用于从以数字为输入的API响应生成的产品数量输入。一旦用户更改输入字段值，我需要更新每个项目的总价和所有项目的小计

这就是我正在尝试的 数据：

模板：

<div v-for="{{products in productList}}" :key="products.product_id">
    <input type="number" v-model="products.qty" v-on:change="updateCart" >
<p>{{products.productsTotal}}</p>
</div>
    <p>{{subTotal}}</p>

---

我是Vue2的新手，请帮我整理一下。谢谢

您可以将这样的计算属性用于

小计

：

computed: {
    subTotal: function () {
      return this.productList.reduce(
        (p, np) => p.productTotal + np.productTotal
      );
    },
  },

将类似于

v-on:change=“updateCart（product）”

的引用传递给单击的产品以更新其值：

methods: {
    updateCart: function (product) {
      product.productTotal = Number(product.qty) * Number(product.unit_price);
    },
 },

每次我们在此处更新

product.productTotal

时，

subTotal

将自动更新，因为它是一个计算属性

---

旁注：我已经为每个产品添加了

productTotal

属性。如果您的数据不包含它，您可以在设置数据之前在API成功回调中手动添加它。

此.产品

是

未定义的

<代码>小计未定义。请制作一个类似的代码沙盒并尝试运行代码，您将在控制台中看到错误。

computed: {
    subTotal: function () {
      return this.productList.reduce(
        (p, np) => p.productTotal + np.productTotal
      );
    },
  },

methods: {
    updateCart: function (product) {
      product.productTotal = Number(product.qty) * Number(product.unit_price);
    },
 },