Question

我已经创建了一个Vue / Vuefire组件，用于编辑现有的Widget并将编辑内容保存到Firebase。

Widgets上有一些应该不保存到Firebase的反应属性，例如错误消息以及当前是否显示Widget。因此，我将所有Firebase数据存储在firebaseData属性中：

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

作为替代方案，您可以直接使用firebase而不是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;
    });
  }
}

必须明确删除＆＃39; .key＆＃39;在Firebase

1 个答案: