Vue.js 2 with Firebase Crud example

问题

I'm struggling to edit a single item with vue and firebase. My edit page url receives item's id. So what I want is to load this single item from firebase. Edit it and save it back into firebase.

I use vue version 2 and vuefire.

I'm stuck at loading a single item from firebase and displaying it in a form.

Here is what I've got so far:

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

回答1:

according to VueFire in Github (https://github.com/vuejs/vuefire):

To delete or update an item you can use the .key property of a given object. But keep in mind you have to remove the .key attribute of the updated object:

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

Please, note that you have to use "item.set" instead of "item.push". "push" would create a new item instead of updating it.

来源：https://stackoverflow.com/questions/44995450/vue-js-2-with-firebase-crud-example