如何使用Vue.js正确调用总价方法实现购物车总价实时显示

问题根因 #

你的total方法逻辑本身没有问题，错误出在调用方式：

• 你用原生DOM操作document.getElementById('tot').innerHTML = galleryItems.total()只会在页面初始化时执行一次，后续购物车cart数组发生变化时，不会自动重新计算更新总价
• 该方式绕开了Vue的响应式渲染机制，无法实现数据变化自动同步视图

修复方案 #

1. 修改总价展示模板 #

直接在Vue控制的模板区域使用插值语法调用total方法即可，Vue会自动监听依赖变化，在cart更新时重新执行方法刷新视图：

<p>Your Total:</p>
<h3 id = "tot">R {{ total() }} </h3>
<button @click="checkout()" class = "btn btn-primary">Checkout</button>

2. 删除冗余代码 #

移除JS中那行原生DOM赋值代码：

// 删掉下面这行
document.getElementById('tot').innerHTML = galleryItems.total();

可选优化：使用计算属性替代方法 #

总价逻辑属于典型的计算类场景，使用计算属性会比普通方法性能更好：计算属性会基于响应式依赖缓存结果，只有cart发生变化时才会重新计算，普通方法则会在每次页面渲染时都重新执行。
修改方式如下：

1. 在Vue实例中新增computed配置项，将total逻辑移到计算属性中：

let galleryItems = new Vue({
  el: '#gallery', 
  data: {
    // 原有data内容保持不变
  },
  // 新增计算属性配置
  computed: {
    total() {
      // 可以用reduce简化累加逻辑
      return this.cart.reduce((sum, item) => sum + item.price, 0)
    }
  },
  methods: {
    // 原有方法不变，注意把原来methods里的total方法删掉
    add2cart(item){
      this.cart.push(item);
    },
    deleteItem(index){
      this.cart.splice(index, 1); 
    }
  }
})

2. 模板中直接调用计算属性，不需要加括号：

<h3 id = "tot">R {{ total }} </h3>

内容的提问来源于stack exchange，提问作者user14310306