Vue实现购物车表格增减数量时数据更新视图不刷新如何解决

开发Vue购物车商品表格时，点击表格内的数量增加、减少按钮，视图层展示的商品数量不会同步增减，但通过Vue组件调试工具检查，数组内存储的数量数据实际已经完成更新。

该场景为常规购物车商品表格，参考同类实现方案后问题仍未解决，无法确定是配置遗漏还是数量自增逻辑编写错误。

1. Vue 2响应式系统限制：直接给已创建的对象新增属性、直接修改数组内对象的未声明属性时，Vue无法拦截属性变动，不会触发视图更新。代码中直接给接口返回的商品对象新增count属性、增减数量时直接修改this.items[i].count的写法，都不符合Vue 2响应式更新要求。
2. 列表渲染key设置错误：v-for使用数组索引作为key，列表内容变动时易出现DOM复用错误，导致渲染不更新。
3. 附带逻辑错误：商品总价计算仅累加单价，未乘以对应商品数量；减号按钮的禁用判断和点击逻辑判断不一致。

• 给商品对象新增count属性时，使用$set方法做响应式赋值，修改currentDataItems方法内两处赋值逻辑：

// 原代码 data.count = 1 替换为
this.$set(data, 'count', 1)

• 修改数量增减方法，通过$set更新数量值，同时对齐减号按钮的禁用判断逻辑：

increment (i) {
  this.$set(this.items[i], 'count', this.items[i].count + 1)
},
decrement (i) {
  if (this.items[i].count <= 1) return
  this.$set(this.items[i], 'count', this.items[i].count - 1)
}

• 更换v-for的key值，使用商品唯一id替代数组索引，避免DOM复用异常：

<!-- 原代码 <tr v-for="(product, i) in items" :key="i"> 替换为 -->
<tr v-for="(product, i) in items" :key="product.id">

• 修复总价计算逻辑，计算总价时乘以对应商品数量，同时修正单行商品总价的计算方法：

// 修改totalNeto计算属性
totalNeto: function () {
  var sum = 0
  this.items.forEach(e => {
    sum += e.price * e.count
  })
  return sum
},
// 修改单行总价计算方法
sumTotalproduct (price, count) {
  return Number(price * count).toLocaleString()
}

对应模板中单行总价的渲染代码同步修改：

<td>${{ sumTotalproduct(product.price, product.count) }}</td>

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