Vue.js问题：切换服务时固定总价计算未实时更新

问题原因 #

1. 计算属性写法违规：你在getTotalFixedPrice计算属性里直接给this.totalFixedPrice赋值，违背了计算属性“仅依赖响应式数据返回结果”的设计原则，导致Vue无法正确追踪依赖关系，数据变更时无法触发计算属性更新。
2. 响应式更新失效：当edit-service组件切换服务时，若直接修改item.fixed_price这类对象属性，或用非响应式方式修改数组元素，Vue的响应式系统无法感知到变更，自然不会触发计算属性重新计算。
3. v-for的key不合理：使用index作为v-for的key，当数组元素替换或顺序变更时，Vue会复用现有组件而非重新渲染，可能导致数据更新后视图不同步。

解决方案 #

1. 修正计算属性写法 #

移除对this.totalFixedPrice的赋值，让计算属性直接返回计算结果，同时优化空值/NaN的处理：

getTotalFixedPrice() {
  return this.editedItem.service
    // 将非数字值转为0，避免漏算
    .map(val => parseInt(val.fixed_price) || 0)
    .reduce((a, b) => a + b, 0)
}

模板中直接使用该计算属性（无需依赖totalFixedPrice变量）：

<!-- 示例：在模板中展示总价 -->
<div>固定价格总和：{{ getTotalFixedPrice }}</div>

2. 确保子组件修改数据的响应式 #

在Estimates.vue的onEdit方法中，使用Vue响应式API修改数据：

onEdit(event) {
  const { index, fixedPrice } = event;
  // 用$set确保响应式更新
  this.$set(this.editedItem.service[index], 'fixed_price', fixedPrice);
}

若在edit-service组件内部修改数据，同样需要通过$set或确保父组件传递的item是响应式对象。

3. 优化v-for的key值 #

将v-for的key从index改为服务项的唯一标识（如item.id），确保Vue能正确识别元素变更：

<edit-service                                      
  v-for="(item, index) in editedItem.service"
  :item="item"
  :editedItem="editedItem"
  :key="item.id"  <!-- 替换为服务项的唯一ID -->
  :index="index"                                         
  :services="services.services"
  :items="editedItem"
  :edit="edit"
  @onEdit="onEdit($event)"
/>

验证 #

完成以上修改后，切换服务时editedItem.service的变更会被Vue响应式系统感知，getTotalFixedPrice会自动重新计算并更新视图。

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