小小经验：Vue中计算属性computed没有被触发的排查

小小经验：Vue中计算属性computed没有被触发的排查

vue中的计算属性可以绑定动态变量，当页面有变化时，计算属性就会自动更新

data中定义了相互独立并且不影响的变量

问题：computed中定义的一个动态变量在相关的属性发生变化时，并没有发生相对应地发生变化

比如，我点击全选或者商品的单选时，商品的总件数或者总价都没有发生变化

计算属性的代码：

 computed: {
    totalNum: function () {
      let total = 0;
      console.log(total);
      for (let i = 0; i < this.carts.length; i++) {
        console.log(total);
        if (this.carts[i].checked) {
          let item = this.carts[i];
          console.log(item);
          total += item.num;
          console.log(total);
        }
      }
      //   console.log(total);
      return total;
    },

    totalPrice: function () {
      let total = 0;
      for (let i = 0; i < this.carts.length; i++) {
        if (this.carts[i].checked) {
          let item = this.carts[i];
          total += item.price * item.num;
        }
      }
      //   console.log(total);
      return total.toFixed(2);
    },
  },

原因：购物车的数据属性中没有checked这个属性

错误代码：

        {
          id: 1,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: 1,
        },

正确代码:

        {
          id: 1,
          image: "",
          name: "玫瑰花茶",
          abs: "玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶玫瑰花茶",
          price: "199.00",
          netcontent: "250",
          num: 1,
          checked: false,
        },

保存后重新执行

,