javascript - vuejs+elementui 购物车价格计算，点击加减号修改数量总价都不会改变，但是计算执行了

问题描述

问 题

一个商品下单的功能
查出所有商品，点击下单，然后把下单的商品加入购物车，购物车是不用保存的
商品可以修改数量，计算总价，现在我method里面的计算执行了，但是页面点击加减号的时候，数量和总价就是不会变,查询出来的数据列表里面，没有数量和总价这两个字段，这里是我自己定义的

<el-table-column label="数量" width="220"  >
                        <template scope="scope">
                          <el-input v-model="scope.row.count" :value="scope.row.count"  @change="changeCount(scope.row)" :min="1" :max="scope.row.num">
                          <el-button slot="prepend" @click="changeQuantity(scope.row,-1)"><i class="el-icon-minus"></i></el-button>
                          <el-button slot="append" @click="changeQuantity(scope.row,1)"><i class="el-icon-plus"></i></el-button>
                          </el-input>
                          <br />
                          <span style="color:#999;display: block; text-align: center;">库存{{scope.row.num}}件</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价" width="100"></el-table-column>
                    <el-table-column prop="totalPrice" label="总价" width="150" v-model="cartListData.totalPrice"></el-table-column>

count: undefined,
totalPrice: 0,

//下单商品列表
getCartData() {
                this.$axios({
                        url: this.path + 'product/getByList',
                        method: 'get',
                        params: this.cartListQuery,
                        transformRequest: [function(params) {
                            let ret = ''
                            for(let it in params) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
                            }
                            return ret
                        }],
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then((res) => {
                        
                        this.cartNum  //下单商品的长度
                        this.cartListData = res.data;
                        this.cartListData.forEach(function(data,index){
                            data.count = 1; //默认一个商品
                            data.totalPrice= (data.price * parseInt(data.count)).toFixed(2);
                            //商品总价
                        });    
                    })
                    .catch((err) => {
                        console.log(err);
                    })
            },
    //加减号
    changeQuantity(row, type){
              if( type > 0 ){
                row.count++;
              }else{
                row.count > 1 ? row.count--: row.count = 1;
              }
              this.changeCount(row);
            },
            //数量文本框值改变
            changeCount (row) {
                if(null == row.count || row.count == ""){
                  row.count=1;
                }
                row.totalPrice = (row.count * row.price).toFixed(2);//保留两位小数
                   console.log(row.totalPrice+" = "+ row.count +" * "+ row.price)
                //增加商品数量也需要重新计算商品总价
             },

解决方案

changeCount (row) {
                const index = this.cartListData.indexOf(row);
                this.cartListData.splice(index,1,row);  //需要更新一下table数据
                
                if(null == row.count || row.count == ""){
                  row.count=1;
                }
                row.totalPrice = (row.count * row.price).toFixed(2);//保留两位小数
                   console.log(row.totalPrice+" = "+ row.count +" * "+ row.price)
                //增加商品数量也需要重新计算商品总价
             }

这篇关于javascript - vuejs+elementui 购物车价格计算，点击加减号修改数量总价都不会改变，但是计算执行了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！