前端购物车商品删除，数量加减

商品按钮的加减

            <!-- 到一时禁用这个按钮 -->
            <button :disabled="itmr.count===1" @click="itmr.count--">-</button>
            <input @keydown.enter="onblur(itmr,$event)" @blur="onblur(itmr,$event)" type="text" v-model="itmr.count" />
            <button  @click="itmr.count++">+</button>

用计算属性，将总积分与总商品放在对象里return出去

computed: {
    totalall() {
      //先定义两个变量，总积分与总金额
      let totalpart = 0;
      let totalprice = 0;
      // 循环两个数组，将总积分和总金额得到
      this.shopcarlist.forEach(r => {
        r.goodslist.forEach(rr => {
          totalpart += rr.part* rr.count
          totalprice += rr.price*rr.count
        })
      })
      // 将一个对象return出去
      return {totalpart,totalprice}
    }
  }

删除单价商品

// html部分 
<div class="del" @click="del(j,i)">X</div>

// js部分
del(j, i) {
      let isconfirm = confirm("确定要删除吗");
      if (isconfirm) {
        // 先找到购物车里的卖家店铺的商品数组
        let goodlist = this.shopcarlist[j].goodslist;
        // 再将这个对象删除
        goodlist.splice(i, 1);
        // 判断商品数组为空，就将这个店铺对象删除
        if (goodlist.length === 0) {
          this.shopcarlist.splice(j, 1);
        }
      }
    }

判断输入数量文本框的值是否合法

// 可以几个事件绑定同一个方法 将商品对象和e传过去
@keydown.enter="onblur(itmr,$event)" @blur="onblur(itmr,$event)"

 // 将商品的对象传进来
    onblur(itmr,e){
      // 先将字符转换成数字
      let val = parseInt(e.target.value)
      // 判断是否为数字
      if(isNaN(val)) val = 1
      // 判断是否不为整数
      if(!Number.isSafeInteger(val)) Math.floor(val)
      if(val<1) val = 1
      itmr.count = val
      e.target.value = val
    },

模板较为粗糙

image

前端购物车商品删除，数量加减

推荐阅读更多精彩内容