在 Vue 2 中直接修改数组内对象的属性（如 item.price = ...）不会触发视图更新，需用 this.$set 显式声明响应式变更；本文详解如何精准定位并更新嵌套对象，确保模板实时同步。
在 vue 2 中直接修改数组内对象的属性（如 `item.price = ...`）不会触发视图更新，需用 `this.$set` 显式声明响应式变更；本文详解如何精准定位并更新嵌套对象，确保模板实时同步。
Vue 2 的响应式系统对数组的监听存在限制：它无法检测通过索引直接设置元素（如 arr[0] = newVal）或直接修改对象属性（如 obj.prop = newVal）——即使该对象本身是响应式的。你遇到的问题正是典型场景：this.details.forEach(...) 中对 item.price 的赋值虽改变了数据，但 Vue 并未追踪到该变化，因此模板不会立即更新；只有当触发其他响应式依赖（如点击页面其他区域导致重新渲染）时，才“被动”显示新值。
关键在于：必须使用 this.$set 显式通知 Vue 数据发生了变更，且要作用于响应式数据的“正确层级”。
你尝试的 this.$set(item, "price", ...) 之所以无效，是因为 item 是普通 JavaScript 对象（非 Vue 实例），$set 在此上下文中不生效；而 this.$set(this.details, index, ...) 若传入全新对象，会替换整个数组项，可能意外丢失其他响应式属性（如 item.id、item.name 等），破坏响应式链。
✅ 正确做法是：仅更新目标属性，保留原对象结构，并确保变更发生在 Vue 能追踪的响应式路径上。推荐以下两种安全方案：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
✅ 方案一：使用 this.$set 更新对象属性（推荐）
setPrice(id) {
const index = this.details.findIndex(detail => detail.id === id);
if (index !== -1) {
// 直接在原对象上设置 price 属性，Vue 2 支持对响应式对象的 $set 属性操作
this.$set(this.details[index], 'price', this.details[index].priceOne);
}
}✅ 原理：this.details[index] 是响应式对象（由 Vue 初始化），this.$set(obj, key, val) 可为其新增/更新属性并保证响应式。
✅ 方案二：使用 Vue.set（全局 API，等价于 this.$set）
import Vue from 'vue';
setPrice(id) {
const index = this.details.findIndex(detail => detail.id === id);
if (index !== -1) {
Vue.set(this.details[index], 'price', this.details[index].priceOne);
}
}⚠️ 注意事项
- 避免 this.$set(this.details, index, {...})：这会用新对象完全替换原数组项，若原对象有其他响应式属性（如计算属性依赖、watch 监听等），可能中断响应式连接。
- 确保 details 是响应式数组：定义时应为 data() { return { details: [] } }，而非 const details = []。
-
v-model 绑定需指向正确引用：你的 <input v-model="register.price"> 中 register 应与 details 中某项为同一引用（例如 register = this.details.find(...)），否则更新 details 不会影响 register.price。建议在模板中直接绑定数组项：
<input v-for="item in details" :key="item.id" v-model="item.price" @keyup.alt="setPrice(item.id)" />
✅ 最终优化版函数（含健壮性检查）
setPrice(id) {
const index = this.details.findIndex(detail => detail.id === id);
if (index === -1) return; // ID 未找到，提前退出
const targetItem = this.details[index];
// 安全更新 price，保留所有原有响应式属性
this.$set(targetItem, 'price', targetItem.priceOne || 0);
}通过以上方式，price 的变更将立即触发视图更新，无需 this.$forceUpdate() 或手动触发重绘，符合 Vue 2 响应式设计的最佳实践。
