Javascript 如何使用Vue js在firebase中删除和编辑记录

我是javascript和web设计的初学者，我正在尝试学习如何使用Vue js在firebase实时数据库上创建、读取、更新和删除数据。本教程非常有用，我成功地设置了Vue CLI，安装了Vuefire和firebase，并创建了一个项目，该项目可以成功地将名称列表添加到我的firebase数据库中。然而，当涉及到删除和编辑名称时，我陷入了困境。以下是我得到的错误：

Error: "Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]""
validatePathString index.cjs.js:1669
child index.cjs.js:13845
setEditName App.vue:86
click App.vue:68

在我看来，它意味着我在

removeName

和其他函数中使用的参数“.key”无效，原因可能是它未定义、为空或包含错误中列出的字符。因此，如果这不是使用Vue js在Firebase实时数据库中编辑和删除记录的方法，那么它是如何完成的呢

代码如下：

App.vue

<div>
    <ul>
      <li v-for="personName of names" 
        v-bind:key="personName['.key']">
        <div v-if="!personName.edit">
          <p>{{personName.name}}</p>
          <button @click="removeName(personName['.key'])">
            Remove
          </button>
          <button @click="setEditName(personName['.key'])">
            Edit
          </button>
        </div>
        <div v-else>
          <input type="text" v-model="personName.name">
          <button @click="saveEdit(personName)">
            Save
          </button>
          <button @click="cancelEdit(personName['.key'])">
            Cancel
          </button>
        </div>
      </li>
    </ul>
  </div>

---

非常感谢你的帮助。提前感谢。

您好，您也可以共享vuefire部分吗？从我看到的情况来看，vuefire仅在导入到项目时出现；像这样：从“vuefire”导入{rtdbPlugin}您好，您也可以共享vuefire部分吗？从我所看到的，vuefire只在导入到项目时出现；如下所示：从“vuefire”导入{rtdbPlugin}

removeName(key) {
  namesRef.child(key).remove();
},
// This function updates the name under a specific key
// in the firebase db hence editting a name
setEditName(key) {
  namesRef.child(key).update({ edit: true });
},
// Create function for cancelling edit
cancelEdit(key) {
  namesRef.child(key).update({ edit: false })
},
// Function for saving edits
saveEdit(person) {
  const key = person['.key']
  // Set overwrites the current data
  namesRef.child(key).set({ name: person.name, 
  edit: false })
}