Vue.js 动态表格行中价格字段被清空的解决方案-js教程-PHP中文网

Vue.js 动态表格行中价格字段被清空的解决方案

本文讲解如何在 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 自动同步到对应的视图：

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() 必须推送一个具有默认字段的对象，确保新行与已有行结构一致，维持响应式完整性：

JSON Toolkit
JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载
```
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"><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"）以提升列表渲染稳定性。