在 Vue 2 中，直接修改数组中对象的属性（如 item.price = ...）无法触发视图更新；必须通过 this.$set 显式声明响应式变更，否则模板不会同步——即使 console.log 显示值已改变。
在 vue 2 中，直接修改数组中对象的属性（如 `item.price = ...`）无法触发视图更新；必须通过 `this.$set` 显式声明响应式变更，否则模板不会同步——即使 `console.log` 显示值已改变。
Vue 2 的响应式系统对数组的变更检测存在限制：它无法探测通过索引直接赋值（如 arr[0] = newValue）或修改对象已有属性（如 obj.prop = newValue）的操作。你遇到的问题正是典型场景——this.details.forEach(...) 中执行 item.price = item.priceOne，虽然 JavaScript 层面成功赋值，但 Vue 并未追踪该属性变化，因此绑定的 不会自动刷新。
关键误区在于：v-model="register.price" 绑定的是 register 对象的 price，但你的 setPrice(id) 方法却在遍历 this.details 数组并修改其中某个 item.price。如果 register 并非 details 中对应 id 的那个对象引用（例如只是浅拷贝或独立对象），那么修改 details[itemIndex].price 根本不会影响 register.price 的值——这解释了为何“点击页面其他区域后才更新”：可能触发了意外的重渲染或 register 被重新赋值。
✅ 正确做法分两步：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章