Question

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

这是我正在尝试的数据：

 "productList": [
                {
                    "id": 27,
                    "product_id": "2362",
                    "product_name": "nengra",
                    "unit": "box",
                    "minimum_order": "1",
                    "unit_price": "890",
                    "photo_url": "http://45.114.85.21:11011/micro_product/mv8gigsx2e_7a4i2twgv6.jpg"
                },
                {
                    "id": 29,
                    "product_id": "2365",
                    "product_name": "nengra",
                    "unit": "box",
                    "minimum_order": "1",
                    "unit_price": "890",
                    "photo_url": "http://45.114.85.21:11011/micro_product/qdmiugpabf_4ojvtkryym.jpg"
                }
    ]

模板：

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

脚本：

 data(){
    return{
      qty:[],
      cartID: null,
      productList: [],
      total: 0,
      subtotal: 0,
      productTotal: 0
    }
  },
  methods: {
    updateCart: function (){
        this.products.productTotal = this.products.qty * this.productList.price
    }
  }

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

Answer 1

您可以为 subTotal 使用这样的计算属性：

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成功回调中手动添加。

从 Vue2 中可变数量的输入字段更新输入字段总数

1 个答案: