javascript - 如何使用Vue js删除和编辑firebase中的记录

Question

我一般是 javascript 和网页设计的初学者，我正在尝试学习如何使用 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

在我看来，这意味着我在 inremoveName和其他函数中使用的参数“.key”无效，因为它未定义、为空或包含错误中列出的字符。那么如果这不是使用 Vue js 在 Firebase 实时数据库中编辑和删除记录的方法，那它是怎么做到的呢？

这是代码：

应用程序.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>

以下是 CRUD 数据库操作的函数：

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 })
}

您的帮助将不胜感激。提前致谢。

标签： javascriptvue.jsfirebase-realtime-databasevuefire