Vue.js动态表格行问题：添加新行时已选商品价格被清空

问题现象 #

选择商品后通过Axios接口设置价格输入框的值，点击添加新行时，之前行的价格会被清空；但手动输入价格后添加新行，值不会丢失。需求为价格仅通过接口获取。

错误原因 #

1. 绕过Vue响应式系统操作DOM：setprice方法中直接通过DOM API修改输入框value属性，未更新Vue实例中invoice_products数组对应项的product_price值。Vue依赖数据驱动视图，手动修改DOM不会同步到数据，添加新行触发重新渲染时，视图会根据未更新的数据重置，导致价格被清空。
2. 新行数据结构不完整：addNewRow方法向数组推入空对象，与初始数据结构不一致，可能引发响应式追踪的潜在问题。

修正方案 #

修改模板代码 #

给@change事件传递当前行索引，用于定位对应商品项：

<tr v-for="(invoice_product, k) in invoice_products" :key="k">
  <td scope="row" class="trashIconContainer">
    <button class="btn-outline-danger btn-sm rem_row" type="button" @click="deleteRow(k, invoice_product)">
      <i class="fa fa-times"></i>
    </button>       
  </td>   
  <td>
    <select name="product" v-model="invoice_product.product_name" @change="setprice($event, k)">
      <option v-for="(spro, index) in supplierproducts" :key="index" :value="spro.id">{{ spro.name }}</option>
    </select>
  </td>
  <td>
    <input class="textbox text-right" type="text" v-model="invoice_product.product_price" />
  </td>
</tr>

修改脚本代码 #

1. 更新setprice方法，直接修改响应式数据，不再操作DOM；
2. 修正addNewRow方法，推入结构完整的对象：

data() {
  return {
    errors: {},
    valid: true,
    suppliers: [],
    supplierproducts: [],
    input: {
      supplier: ""
    },
    invoice_subtotal: 0,
    invoice_total: 0,
    invoice_tax: 5,
    invoice_products: [{
      product_name: '',
      product_price: ''
    }]
  }
},
methods: {
  setprice(e, index) {    
    this.axios.get('/getproduct/' + e.target.value).then((response) => {        
      if (response.status == 200) {
        // 直接更新响应式数据，Vue自动同步视图
        this.invoice_products[index].product_price = response.data[0].price
      } else {
        console.log(response.data);
      }
    })
  },
  addNewRow() {
    // 推入与初始项结构一致的对象，保证响应式正常
    this.invoice_products.push({
      product_name: '',
      product_price: ''
    });
  },
  deleteRow(k, invoice_product) {
    this.invoice_products.splice(k, 1);
  }
}

原理说明 #

Vue通过数据驱动视图，只有修改响应式数据，视图才会自动更新并保持同步。直接操作DOM修改输入框值，数据层面无变化，组件重新渲染时（如添加新行触发数组更新），视图会根据原始数据重置，导致之前的DOM修改值丢失。直接更新invoice_products数组对应项的product_price，Vue会追踪数据变化，自动同步视图并维持数据与视图的一致性。

内容的提问来源于stack exchange，提问作者ayyanar pms