VUE中，动态添加的文本框如何实现数据实时双向绑定？

解答思路

问题的根源不是 v-model，而是新 push 进数组的对象里根本没有 price 字段，并且直接 push 了原始对象的引用，导致数据被意外污染。

示例代码

selectChange(item) {
  // 错误写法：直接 push 原对象引用，且缺少 price 字段
  // this.goodsPrice.push(item);

  // 正确写法：拷贝一份对象，并补上需要双向绑定的字段
  this.goodsPrice.push({ ...item, price: 0 });
}

<el-input style="width: 120px" v-model="item.price" />

详细说明

• 原来的 item 对象结构大致是 { value: '选项1', label: '黄金糕' }，里面并没有 price 字段，所以 v-model="item.price" 自然监测不到任何变化。
• 直接 this.goodsPrice.push(item) 又把原始对象的引用推入了数组，之后对 item.price 的修改会同时影响原始数据源，产生难以排查的“数据串了”问题。
• 解决方式是用扩展运算符 {...item, price: 0} 拷贝出一个新对象，并显式补上 price 字段，这样新对象才是响应式且互相独立的，v-model 才能正常工作。

小结

遇到动态添加的表单项无法双向绑定，先检查：1）绑定字段是否真实存在于数据对象上；2）是否误用了原始对象的引用而不是拷贝。