Firebaseでデータを設定/更新する前に '.key'を明示的に削除しなければならない

Question

私はVue/Vuefireコンポーネントを作成して既存のウィジェットを編集し、Firebaseに保存しました。

エラーメッセージやウィジェットが現在表示されているかどうかのように、でなく、をFirebaseに保存する必要があるウィジェットに反応するプロパティがいくつかあります。だから私はfirebaseDataプロパティ内のすべてのFirebaseデータを格納しています：

Vue.component('widgetForm', { 
    template: '#myWidgetFormTemplate', 
    props: ['firebaseKey'], 
    data: function(){ 
     return { 
      error: '', 
      isShown: false, 
      firebaseData: {} 
     } 
    }, 
    methods: { 
     show: function(){ 
      var form = this; 
      form.isShown = true; 
      form.$bindAsObject('firebaseData', fb.ref('/widgets').child(form.firebaseKey)); 
     }, 
     save: function(){ 
      var form = this; 
      delete form.firebaseData['.key']; // This seems weird 
      form.$firebaseRefs.firebaseData.set(form.firebaseData, function(err){ 
       if(err) form.error = err; 
      }); 
     } 
    } 
}); 

問題は、データを保存するとき、私は常にエラーFirst argument contains an invalid key (.key)を得るということです。私の解決策は、上記のように.keyプロパティを明示的に削除することです。

これはコードの臭いのように感じます。これをする必要がない方法はありますか？

Answer 1

代わりに、ファイヤーベースをvuefireの代わりに直接使用することもできます。

methods: { 
    show: function() { 
    var form = this; 
    form.isShown = true; 
    fb.ref(`/widgets/${form.firebaseKey}`) 
     .on('value') 
     .then(snapshot => { 
     form.firebaseData = snapshot.val(); 
     }); 
    }, 
    save: function() { 
    var form = this; 

    fb.ref(`/widgets/${form.firebaseKey}`).set(form.firebaseData, function(err) { 
     if (err) form.error = err; 
    }); 
    } 
}