本文讲解如何在 vue.js 中正确实现动态表格行添加与价格自动填充，避免因直接操作 dom 或未初始化新行数据导致的价格值丢失问题。核心是始终通过响应式数据驱动视图更新，并为每行提供完整初始状态。
本文讲解如何在 vue.js 中正确实现动态表格行添加与价格自动填充，避免因直接操作 dom 或未初始化新行数据导致的价格值丢失问题。核心是始终通过响应式数据驱动视图更新，并为每行提供完整初始状态。
在 Vue.js 中构建动态表格时，一个常见误区是绕过响应式系统、直接操作 DOM 元素（如 e.target.parentElement.nextElementSibling...），这会导致 Vue 无法追踪数据变化，进而引发视图不一致——例如：新增一行后，前一行的 product_price 输入框内容意外清空。
根本原因在于你当前的 addNewRow() 方法中使用了 this.invoice_products.push({})，该空对象 未包含 product_name 和 product_price 字段，导致 Vue 无法为新行建立响应式代理。当后续重新渲染或触发响应式依赖更新时，旧行的绑定可能因数据结构不一致而失效，尤其在结合 v-model 与未定义属性时，极易出现值“丢失”的假象。
✅ 正确做法是：
-
始终修改响应式数据，而非直接操作 DOM
在setprice()中，应直接赋值给product.product_price，由 Vue 自动同步到对应<input>的视图：setprice(product) { // 注意：此处传入的是 invoice_product 对象，无需再从 event.target 解析 ID if (!product.product_name) return; this.axios.get(`/getproduct/${product.product_name}`) .then(response => { if (response.status === 200 && response.data.length > 0) { product.product_price = response.data[0].price; // ✅ 响应式更新 } }) .catch(err => console.error('Failed to fetch price:', err)); } -
为每一行提供完整、明确的初始状态
addNewRow()必须推送一个具有默认字段的对象，确保新行与已有行结构一致，维持响应式完整性：立即学习“前端免费学习笔记（深入）”；
addNewRow() { this.invoice_products.push({ product_name: '', // ✅ 显式初始化 product_price: '' // ✅ 避免 undefined 导致 v-model 绑定异常 }); } -
模板中优化事件绑定逻辑
将@change="setprice($event)"改为@change="setprice(invoice_product)"，直接传入当前行数据对象，语义更清晰、逻辑更健壮：<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>
⚠️ 补充注意事项：
- 确保
supplierproducts数据格式统一（推荐id为数字或字符串，避免类型混淆）； - 在
setprice()中增加空值校验（如!product.product_name），防止无效请求； - 若需支持手动编辑价格后禁止覆盖，可在
invoice_product中添加isPriceManuallyEdited: false标志位，并在setprice()中增加判断逻辑； - 使用
:key="k"是可接受的，但更推荐使用唯一标识（如:key="invoice_product.id || k"）以提升列表渲染稳定性。
遵循“数据驱动视图”原则，杜绝手动 DOM 操作，同时保证每条动态数据结构完整且响应式，即可彻底解决新增行导致价格清空的问题。
