ngModel取值关联外部对象，动态输入行Autocomplete联动异常排查请求

Hey there! Let's figure out how to fix that annoying issue where selecting a new value in one row messes up the previous row's inputs. I’ve run into similar problems before, so here’s what’s likely going on and how to fix it:

1. The Root Cause: Shared Object References #

The most common culprit here is reusing the same object reference across rows. If you’re adding new rows by copying the last row’s object directly (like this.rows.push(this.rows[this.rows.length - 1])), every row will point to the same underlying object. So when you update one row, all rows sharing that reference will update too—hence the unexpected changes in the previous row.

2. Fix: Create Independent Row Objects #

When adding a new row, always create a fresh, independent object instead of copying the reference. This ensures each row’s data is isolated:

// 父组件中新增行的方法
addNewRow() {
  // 初始化一个全新的空行对象（或者用默认值）
  const newRow = {
    autocompleteValue: null,
    secondaryField1: '',
    secondaryField2: ''
    // 其他需要的字段
  };
  this.rows.push(newRow);
}

If you need to pre-fill new rows with default values from an existing row, use object spread or deep cloning to break the reference:

// 用对象浅拷贝（适合无嵌套对象的场景）
const newRow = {...this.defaultRowTemplate};

// 有嵌套对象的话，用深拷贝
const newRow = JSON.parse(JSON.stringify(this.defaultRowTemplate));

3. Precise Row Targeting for Autocomplete Emits #

Another common issue is not specifying which row the Autocomplete selection belongs to. When your child component emits the selected object, make sure to also pass the row index or unique ID so the parent knows exactly which row to update:

Child Autocomplete Component:

// 子组件中选中值后的处理
onAutocompleteSelect(selectedObj) {
  // 传递选中对象 + 当前行的索引（从父组件传入）
  this.$emit('value-selected', selectedObj, this.rowIndex);
}

Parent Component Template:

<div v-for="(row, index) in rows" :key="row.id"> <!-- 用唯一ID当key，别用索引！ -->
  <autocomplete-child
    @value-selected="handleRowSelection($event, index)"
    :row-index="index"
    v-model="row.autocompleteValue"
  ></autocomplete-child>
  <input v-model="row.secondaryField1" />
  <input v-model="row.secondaryField2" />
</div>

Parent Component Method:

handleRowSelection(selectedObj, rowIndex) {
  // 直接修改对应索引的行数据，不会影响其他行
  const targetRow = this.rows[rowIndex];
  targetRow.secondaryField1 = selectedObj.field1;
  targetRow.secondaryField2 = selectedObj.field2;
}

4. Handle External Data Loading Correctly #

If you’re populating rows from an external object (like an API response), make sure to map the external data into new row objects instead of using direct references:

loadRowsFromExternalData(externalData) {
  this.rows = externalData.map(item => {
    // 返回新对象，避免引用外部数据的原始对象
    return {
      id: item.id, // 用唯一ID当v-for的key
      autocompleteValue: item.autocompleteValue,
      secondaryField1: item.field1,
      secondaryField2: item.field2
    };
  });
}

5. Use Stable, Unique Keys for v-for #

Never use the array index as the :key for your v-for rows if you’re adding/removing rows. Vue uses keys to track component state, and reusing index keys can cause it to reuse old components (and their state) incorrectly. Instead, use a unique identifier from your row data (like row.id).

By following these steps, you’ll ensure each row’s data is fully independent, and selecting a value in one row won’t accidentally alter another.

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