Question

我通常是JavaScript和Web设计的初学者，并且我正在尝试学习如何使用Vue JS在tutorial上创建，读取，更新和删除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>

以下是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 })
}

非常感谢您的帮助。预先感谢。

如何使用Vue js

0 个答案: