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而不使用外部库。我不想使用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);
    }
  }
})

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

this.product计算属性中this.qty和total的存在，只要total或{{1}中的this.product，就会自动重新计算this.qty变化。

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

1 个答案: