带有 Firebase Crud 示例的 Vue.js 2

Question

我正在努力使用 vue 和 firebase 编辑单个项目。 我的编辑页面 url 接收项目的 id。 所以我想要的是从firebase加载这个单项。 对其进行编辑并将其保存回 Firebase。

我使用 vue 版本 2 和 vuefire。

我一直无法从 firebase 加载单个项目并将其显示在表单中。

这是我目前得到的：

<template>
<div>
    <h1>Item: {{ item.name }}</h1>
    <label>Name</label>
    <input type="text" value="" name="hive-name"/>
</div>
</template>

<script>
import { db } from '../firebase';

export default {
data() {
    return {
      id: this.$route.params.id,
      item: {},
    }
},
firebase() {
    return {
      items: db.ref('items'),
      item: db.ref('items/' + this.id),
    }

},
methods: {
    updateitem() {
      this.$firebaseRefs.item.push(this.item);
    },
},
}
</script>

Answer 1

根据 Github 中的 VueFire (https://github.com/vuejs/vuefire)：

要删除或更新项目，您可以使用给定对象的 .key 属性。但请记住，您必须删除更新对象的 .key 属性：

updateItem: function (item) { 
   // create a copy of the item
   item = {...item}
   // remove the .key attribute
   delete item['.key']
   this.$firebaseRefs.items.child(item['.key']).set(item)
 } 

请注意，您必须使用“item.set”而不是“item.push”。 "push" 会创建一个新项目而不是更新它。