Vue3 可插入行表格删除中间行后其余输入框值被重置问题求解

核心问题原因 #

• v-for的key使用了数组索引index：删除中间行后，后续元素的索引会整体前移，Vue会基于key复用组件实例，导致组件绑定的数据出现错位，触发输入框值重置。
• 输入框未实现双向数据同步：当前子组件的输入框仅使用:value做单向props绑定，用户在输入框中修改的内容没有同步回父组件的elements数组，只要数组触发更新导致组件重渲染，输入框就会回滚到数组中存储的初始值。
• 代码笔误：输入框的type属性写错为ipunt，应为input。

具体修复步骤 #

1. 修复父组件v-for的key绑定与数据同步逻辑 #

将key改为每行唯一不变的element.id，同时新增事件监听同步子组件输入的内容，补充新增行的默认字段：

<script>
import editortable from "./editortable.vue";
export default {
data: () => {
    return {
      elements: [{ id: 0, ref: "1", equation: "2" }],
      nextid: 1,
    };
  },
  methods: {
    removrow(index) {
      this.elements.splice(index, 1);
    },
    add() {
      this.elements.push({
        id: this.nextid++,
        ref: "",
        equation: "" // 补充缺失的equation默认字段
      });
    },
  },
  components: {
    editortable,
  },
};
</script>

<template>
  <tbody>
    <tr
      is="vue:editortable"
      v-for="(element, index) in elements"
      :iden="element.id"
      :referen="element.ref"
      :eq="element.equation"
      :key="element.id" <!-- 替换index为唯一id -->
      @delete="removrow(index)"
      @update:ref="elements[index].ref = $event" <!-- 监听ref输入变更 -->
    ></tr>
  </tbody>
  <button type=" button" class="btn btn-primary" @click="add">
    Ajouter une ligne
  </button>
</template>

2. 修复子组件输入事件与代码笔误 #

补充emit事件声明，输入框新增输入事件将修改值传递给父组件，修正type属性：

<script>
export default {
  props: ["iden", "referen", "eq"],
  emits: ["delete", "update:ref"], // 新增输入更新事件声明
  methods: {
    deleterow() {
      this.$emit("delete");
    },
  },
};
</script>

<template>
  <tr>
    <td>
      <input class="form-control" type="text" :value="iden" disabled />
    </td>
    <td>
      <input 
        class="form-control" 
        type="text" 
        :value="referen"
        @input="$emit('update:ref', $event.target.value)" <!-- 输入时触发事件传值 -->
      />
    </td>
    <td><input class="form-control" type="text" :value="eq" disabled /></td>
    <td>
      <button type="button" class="btn btn-danger" @click="deleterow">
        delete
      </button>
    </td>
  </tr>
</template>

效果验证 #

修改完成后，随意修改多行输入框的内容，再删除中间任意行，剩余行的输入框内容不会再被重置。

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