Vue中点击编辑/删除按钮后表格内容消失的问题求助

核心问题根源 #

你遇到的表格数据消失、currentPlayer无法获取ID的问题，本质是混淆了列表数组与单个对象的用途：

• 初始化时players被赋值为玩家列表数组，但点击编辑/删除时，你把它替换成了单个玩家对象，导致表格的v-for遍历失效，数据直接消失。
• 使用currentPlayer时未完整保留选中玩家的id字段，导致Firebase操作无法定位文档。

分步修复代码 #

1. 修正数据结构定义

将players初始化为数组（存储玩家列表），给currentPlayer添加id字段用于Firebase操作：

data: () => ({
  currentPlayer: {
    id: '', // 新增id字段，用于Firebase文档定位
    name: '',
    score: '',
  },
  defaultPlayer: {
    id: '',
    name: '',
    score: '',
  },
  players: [], // 初始化为空数组，而非单个对象
  headers: [
    { title: 'Name' },
    { title: 'Score' },
    { title: 'Actions' },
  ],
  editDialog: false,
  deleteDialog: false,
  docRef: null,
})

2. 修改弹窗绑定目标

弹窗表单和删除提示绑定到currentPlayer，避免修改原列表数据：

<!-- 编辑弹窗的输入框 -->
<v-text-field label="Player Name" solo dense class="text-white"
  v-model="currentPlayer.name" variant="filled">
</v-text-field>
<v-text-field label="Player Score" solo dense class="text-white"
  v-model="currentPlayer.score" variant="filled">
</v-text-field>

<!-- 删除弹窗的提示文本 -->
<p>Are you sure you want to delete {{ currentPlayer.name }}?</p>

3. 修正编辑/删除触发方法

将选中玩家完整赋值给currentPlayer，保留players数组不变：

async showEdit(player) {
  // 完整复制选中玩家的所有属性（包括id）
  this.currentPlayer = Object.assign({}, player);
  this.docRef = doc(collection(db, "players"), this.currentPlayer.id);
  this.editDialog = true;
},

showDelete(player) {
  this.currentPlayer = Object.assign({}, player);
  this.docRef = doc(collection(db, "players"), this.currentPlayer.id);
  this.deleteDialog = true;
},

4. 修正更新方法的取值来源

更新Firebase时使用currentPlayer的数值：

async editPlayer() {
  await updateDoc(this.docRef, {
    name: this.currentPlayer.name,
    score: this.currentPlayer.score,
  })
  this.closeEdit();
  console.log("Updated Successfully")
},

5. 修正表格循环的Key值

使用玩家唯一ID作为循环Key，避免重复渲染问题：

<tr v-for="player in players" :key="player.id">

修复后逻辑说明 #

• players始终存储完整的玩家列表，不会被单个对象覆盖，表格数据不会消失。
• currentPlayer仅作为编辑/删除操作的临时占位对象，取消操作时重置即可，不影响原列表。
• 完整保留选中玩家的id字段，Firebase操作能准确定位目标文档。

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