Vue中v-for循环下v-model绑定输入框无法回显值的问题

嘿，这个问题我之前也碰到过几次，大概率是这几个常见原因导致的，咱们一步步来排查解决：

1. 检查v-for的key值是否正确 #

Vue依赖key属性来精准跟踪列表中每个元素的身份，如果key用得不对（比如直接用数组的index，而数组元素会动态增删），Vue会复用组件实例，导致数据无法正确更新回显。

正确做法：用每个元素的唯一标识作为key，比如后端返回的id字段：

<!-- 错误示例：用index当key，元素变化时容易出问题 -->
<div v-for="(item, index) in dynamicArray" :key="index">...</div>

<!-- 正确示例：用唯一id当key -->
<div v-for="item in dynamicArray" :key="item.id">...</div>

2. 确保绑定的数据是响应式的 #

如果你的数组元素是动态添加的，或者给元素新增了用于编辑的属性（比如editValue），直接赋值可能不会被Vue的响应式系统追踪到，导致输入框无法拿到初始值。

解决办法：用this.$set来新增响应式属性，或者直接替换整个数组（Vue会检测数组的替换）：

// 点击编辑时，给item新增响应式的editValue属性
toggleEdit(item) {
  item.isEditing = !item.isEditing;
  if (item.isEditing) {
    // 确保editValue是响应式的
    this.$set(item, 'editValue', item.value);
  }
}

3. 确认编辑状态切换时的同步逻辑 #

很多时候问题出在：点击编辑按钮后，只是切换了显示状态，但没有把元素的当前值同步到v-model绑定的变量里，导致输入框是空的。

正确逻辑：点击“编辑”时，把元素的原始值赋值给用于编辑的变量；点击“保存”时，再把编辑后的值同步回原始属性：

<template>
  <div v-for="item in dynamicArray" :key="item.id">
    <!-- 非编辑状态显示原始值 -->
    <span v-if="!item.isEditing">{{ item.value }}</span>
    <!-- 编辑状态绑定编辑用的变量 -->
    <input v-else v-model="item.editValue" />
    <button @click="toggleEdit(item)">
      {{ item.isEditing ? '保存' : '编辑' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicArray: []
    };
  },
  methods: {
    toggleEdit(item) {
      item.isEditing = !item.isEditing;
      if (item.isEditing) {
        // 进入编辑模式，同步原始值到编辑变量
        this.$set(item, 'editValue', item.value);
      } else {
        // 退出编辑模式，保存修改后的值
        item.value = item.editValue;
      }
    },
    // 模拟动态获取数组数据
    loadDynamicData() {
      this.dynamicArray = [
        { id: 1, value: '默认内容1', isEditing: false },
        { id: 2, value: '默认内容2', isEditing: false }
      ];
    }
  },
  mounted() {
    this.loadDynamicData();
  }
};
</script>

总结一下 #

• 优先用元素的唯一标识作为v-for的key，避免使用index
• 动态新增的属性要用this.$set确保响应式
• 切换编辑状态时，手动同步原始值到v-model绑定的变量

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