Vue.js 2 with Firebase Crud example - firebase

Question

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>

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