本文详解 vue.js 中动态添加表格行时因未正确初始化响应式数据导致已有行价格值丢失的问题，重点强调“操作数据而非 dom”和“始终为新行提供默认响应式结构”两大核心原则，并给出可直接落地的修复代码与最佳实践。
本文详解 vue.js 中动态添加表格行时因未正确初始化响应式数据导致已有行价格值丢失的问题，重点强调“操作数据而非 dom”和“始终为新行提供默认响应式结构”两大核心原则，并给出可直接落地的修复代码与最佳实践。
在 Vue.js 中实现动态表格（如发票商品行）时，一个常见却易被忽视的陷阱是：直接操作 DOM 元素（如 e.target.parentElement.nextElementSibling...value = ...）来更新输入框值。这不仅违背 Vue 的响应式设计哲学，更会导致状态不一致——例如新增一行后，前一行绑定的 v-model 数据未同步更新，视觉上看似“被清空”，实则是 Vue 无法追踪到手动修改的 DOM 值，从而在后续渲染中用初始数据（空字符串）覆盖了用户手动输入或异步获取的内容。
根本原因在于两点：
✅ 第一，必须操作响应式数据，而非 DOM
Vue 的 v-model="invoice_product.product_price" 依赖 invoice_product 对象的 product_price 属性作为单一数据源。当你通过原生 DOM API 修改 <input> 的 value，Vue 并不知晓这一变更，也不会触发视图更新；反之，若通过赋值 product.product_price = response.data[0].price，Vue 会自动同步到对应 input 的显示值，且该值始终可被 Vue 正确追踪。
✅ 第二，新增行必须提供完整、响应式的初始结构
原代码中 this.invoice_products.push({}) 创建了一个空对象，其中 product_price 属性并非响应式（Vue 2 无法侦测新增属性）。当后续 setprice() 尝试赋值 product.product_price 时，该属性不会触发视图更新。正确做法是显式初始化所有关键字段：
addNewRow() {
this.invoice_products.push({
product_name: '', // 确保响应式
product_price: '' // 确保响应式，避免 undefined 导致 v-model 失效
});
}同时，@change 事件处理器也需重构：传入整个 invoice_product 对象而非事件对象，使 setprice 方法能直接修改其属性：
<select v-model="invoice_product.product_name"
@change="setprice(invoice_product)">
<option v-for="spro in supplierproducts"
:key="spro.id"
:value="spro.id">
{{ spro.name }}
</option>
</select>methods: {
setprice(product) {
// ✅ 正确：直接修改响应式数据
this.axios.get(`/getproduct/${product.product_name}`)
.then(response => {
if (response.status === 200 && response.data.length > 0) {
product.product_price = response.data[0].price; // Vue 自动同步到 input
}
})
.catch(err => console.error('获取价格失败:', err));
}
}⚠️ 额外注意事项：
- 避免在
v-for中使用索引k作为:key（如:key="k"），应改用唯一标识（如:key="invoice_product.id || k"），防止列表重排时 Vue 错误复用 DOM； - 若
invoice_products初始为空数组，需确保v-model绑定的字段存在，否则可先用Vue.set()或初始化为{ product_name: '', product_price: '' }； - 在 Vue 3 中，响应式规则更严格，务必使用
ref()/reactive()包裹数据，且新增属性需用reactive对象或ref的.value显式赋值。
遵循“数据驱动视图”原则，始终让 Vue 成为你状态管理的唯一权威——不绕过响应式系统操作 DOM，不忽略新数据项的结构完整性，即可彻底规避动态表格中的值丢失问题。
立即学习“前端免费学习笔记（深入）”；
