Vue.js 2 with Firebase Crudの例

Question

vueとfirebaseを使って1つのアイテムを編集するのが苦労しています。 私の編集ページのURLは、アイテムのIDを受け取ります。 私はfirebaseからこの1つのアイテムをロードすることを望みます。 それを編集して元のベースに戻します。

私はvueバージョン2とvuefireを使用します。

firebaseから1つのアイテムを読み込んでフォームに表示するのが遅れています。ここで

は、私がこれまで持っているものです：

<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.push」の「item.set」を使用する必要があることに注意してください。 "プッシュ"は更新する代わりに新しいアイテムを作成します。