利用计算属性实现总价的变化？

如何在最后利用计算属性实现单击按钮商品总价发生变化，试了几次都没有变化，前面的代码有问题吗？

img

img

img

【以下回答由 GPT 生成】

问题的关键在于this.cart在total计算属性中并没有被正确更新。

解决方案如下：

  1. 在 addToCart 方法中，将 product 添加至 this.cart 数组后，立即更新 total 计算属性。
methods: {
   addToCart(product) {
      this.cart.push(product);
      this.$forceUpdate(); // 强制组件重新渲染
   }
},
  1. 或者，你可以将 addToCart 方法变为一个计算属性方法，通过返回一个新的 this.cart 数组来触发计算属性的更新。
methods: {
   addToCart(product) {
      return [...this.cart, product];
   }
},
computed: {
   cart() {
      return this.addToCart(this.product); // 将 this.cart 和 this.product 作为参数传入 addToCart 方法
   },
   total() {
      let totalPrice = 0;
      for (let item of this.cart) {
         totalPrice += item.price;
      }
      return totalPrice;
   }
},

尝试以上方案后，计算属性 total 应该能够实时更新总价了。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

你这里 num和jia都没有取到，要用this

img