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

发布于 2022-09-04 23:19:58 字数 3620 浏览 23 评论 0

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

clipboard.png

clipboard.png

<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)
                //增加商品数量也需要重新计算商品总价
             },

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

南冥有猫 2022-09-11 23:19:58
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)
                //增加商品数量也需要重新计算商品总价
             }
强者自强 2022-09-11 23:19:58

第一个问题,你的问题代码截图不完整

第二个问题,你的总价的v-model是cartListData的totalPrice,而你的method里面设置的是row的totalPrice,你确定你的cartListDatarow是同一个对象?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文