Vuefire: Having to explicitly remove '.key' before setting/updating data

[RobertAKARobin]

I've created a component for editing an existing Widget and saving the edits to Firebase.

There are some reactive properties on the Widgets that should not be saved to Firebase, like error messages and whether the Widget is currently shown. So I'm storing all the Firebase data in a firebaseData property:

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

The problem is that when saving data, I always get the error First argument contains an invalid key (.key). My solution is to explicitly remove the .key property, as above.

This feels like a code smell. Is there a way to not have to do this?

[posva]

When updating data on your firebase db you usually don't use set on the reference directly because that completely erases what you previously have:

// in db
{ foo: 'foo' }
// update it
ref.set({ bar: 'bar' })
// in db
{ bar: 'bar' }
// foo is lost

Usually, you try to go to the deepest child with ref.child('any/key') and then use set. You can also use the update method (https://firebase.google.com/docs/database/web/read-and-write#update_specific_fields) to update multiple fields at the same time.

In your specific case, I would use something like pluck of lodash or simply cloning the object and delete the .key property from the cloned object

[RobertAKARobin]

Thanks, @posva . I understand the difference between .set and .update; my concern is that needing to manually remove .key before writing to the database feels wrong. It sounds like this is expected, however.

[posva]

Yes, you should remove .key in the object copy, not in the original one, although it won't do a difference.

[Frondor]

Fix the documentation then... Lost a lot of time trying to figure out how to accomplish the example.

Since this will never work:

 updateItem: function (item) { 
   this.$firebaseRefs.items.child(item['.key']).set(item)
 }