Question

我很难用vue和firebase编辑单个项目。我的编辑页面网址会收到商品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”会创建一个新项目，而不是更新它。

带有Firebase Crud示例的Vue.js 2

1 个答案: