vue 从数组对象中添加带有质量的总数

Question

在 vue 中，我收到购物车商品请求并将数据列为购物车商品。

这是json数据

{"cart": [
{
  "id": 24,
  "product_id": "1",
  "customer_id": "2",
  "product": {
    "id": 1,
    "name": "Xolo Era 2 (8GB, 4G)",
    "code_name": "1",
    "hsn": "12345",
    "type": "Goods",
    "unit": "PC",
    "qty": "1",
    "mrp_price": "5000",
    "disc_amount": null,
    "discount_per": null,
    "taxable_value": null,
    "cgst": "300",
    "cgst_percentage": "6",
    "sgst": "300",
    "sgst_percentage": "6",
    "igst": null,
    "igst_percentage": "12",
    "taxable_rate": "5000",
    "cess_percentage": null,
    "total_tax": "600.00",
    "listing_price": "5600.00",
    "slug": "Xolo_Era_2_(8GB,_4G)-1522107939"
  },
  "product_primary_images": {
    "name": "1522107951.jpg",
    "cdn_url": "https:\/\/cdn.emp.tecions.xyz\/product_image\/primary\/1522107951.jpg"
  }
}],"customer": 2,"cart_count": 2}

我正在使用 vue 2。更改时，产品数量项目总数正在更新，但总订单价值正在更新

这就是我更新产品总数的方式

  this.product = CART_DETAILS_REQUEST.data.cart;

    return this.product.reduce((total, item, n) => {

      return this.total = Number(total) + Number(item.product.listing_price);
    }, 0);

这是 vue 的模板部分

<el-row v-for="(product, n) in product" :key="product.id">


                <el-col :span="6" class="order-summery-image-container">


                  <img class="order-summery-image" v-bind:src="`${product.product_primary_images.cdn_url}`" alt="">

                </el-col>

                <el-col :span="18" style="text-align: left;margin-left: 30px">

                  <p style="font-size: 22px">{{product.product.name}}</p>

                  <p>

                    Item Price:
                    <span class="listing-price"><i class="fa fa-rupee"></i> {{product.product.listing_price
                      }}</span>
                    <br>
                    Item Total:
                    <span class="listing-price"><i class="fa fa-rupee"></i> {{product.product.listing_price * qty[n]}}</span>


                  </p>


                  <p>


                    <el-input-number size="mini" v-model="qty[n]" :min="1">

                    </el-input-number>

                  </p>


                </el-col>


              </el-row>

我的问题是如何通过更新购物车中每件商品的商品数量来更新总订单价值

注意：我正在使用带有 es6 语法的 VUE 2.0 而不是使用外部 library.I 不想使用 vueex

Answer 1

如果您希望 total 在 product 发生变化时更新，请将其设为计算属性:

new Vue({
  el: '#app',
  // ...
  data: {
    product: // ...
    qty: // ...
//  total: ... // REMOVE from data if it exists
  },
  computed: {
    total() {
        return this.product.reduce((total, item, n) => {
          return Number(total) + (Number(item.product.listing_price) * this.qty[n]);
        }, 0);
    }
  }
})

此外，正如您在上面的代码中看到的，您需要根据 qty 计算 total，我已将其添加到计算中（* this.qty[n])部分）。

在 total 计算的属性中同时存在 this.product 和 this.qty 将使 total 在任何 [=16= 时自动重新计算] 或 this.qty 变化。

vue 从数组对象中添加带有质量的总数

vue add total with quality from array object

vue.js

vue-resource

vue-router

vue-component

vuejs2