Vue.js数组项编辑异常：点击单个编辑按钮触发全部状态变更

问题根源 #

你现在用了全局的editMode变量，所有循环生成的条目都绑定这个变量，只要editMode变化，所有条目都会跟着切换状态，这就是点击一个编辑按钮所有按钮都变的原因。

解决方案：用「当前编辑索引」替代全局状态 #

不要用单个变量控制所有条目，而是用一个变量记录正在编辑的条目索引，只有索引匹配的条目才进入编辑状态。

修改后的模板代码

<div v-for="(post, i) in posts" :key="i">
    <h3>By: {{ post.name }}</h3>
    <!-- 非编辑状态显示内容 -->
    <p v-if="editingIndex !== i">
      {{ post.post }}
    </p>
    <p>{{ post.date }}</p>
    
    <button @click="deletePost(i)">delete</button>

    <!-- 非编辑状态显示Edit按钮 -->
    <button v-if="editingIndex !== i" @click="editPost(i)">Edit</button>
    
    <!-- 仅当前编辑的条目显示输入框和操作按钮 -->
    <input type="text" v-if="editingIndex === i" v-model="post.post">
    <button v-if="editingIndex === i" @click="savePost(i)">Save</button>
    <button v-if="editingIndex === i" @click="cancelEdit">Cancle</button>
</div>

修改后的脚本代码

// 记录当前正在编辑的条目索引，初始为null表示无编辑状态
const editingIndex = ref(null)
// 保存原内容，用于取消编辑时恢复
const originalPostContent = ref("")

const editPost = (i) => {
  editingIndex.value = i
  // 保存当前条目的原始内容
  originalPostContent.value = posts.value[i].post
}

const savePost = (i) => {
  // 1. 更新Firebase数据（需根据你的Firebase配置调整，示例如下）
  // 假设每条post带有Firebase文档的id字段
  // db.collection('posts').doc(posts.value[i].id).update({
  //   post: posts.value[i].post
  // })
  
  // 2. 保存后退出编辑状态
  editingIndex.value = null
}

const cancelEdit = () => {
  // 恢复原内容
  if (editingIndex.value !== null) {
    posts.value[editingIndex.value].post = originalPostContent.value
  }
  // 退出编辑状态
  editingIndex.value = null
}

补充提示 #

1. 务必用Firebase文档的id来定位更新（不要只依赖循环索引），因为数据增删会导致索引变化，容易更新错误条目。
2. 取消编辑时恢复原内容的步骤是可选的，若不需要保留编辑输入，直接重置editingIndex即可。

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