CODEWITHSUNDEEP
firebasefirebase-realtime-databasevue.jsvuefire
RobertAKARobin
RobertAKARobin

Reputation: 4258

Vue and Firebase: Prevent some `data` from being saved to Firebase

I have a component that gets synced to Firebase. I want instances of the component to have some properties that do not get synced to Firebase:

Vue.component('myComponent', {
    data: function(){
        return {
            title: '',
            isShown: false
        }
    }
});

title should be saved to the database, but isShown should not since it's used just to show and hide the element in the browser.

Is there a way of adding reactive properties to a component instance without them being synced to Firebase?

Upvotes: 0

Views: 311

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21485

Only firebase data references are synced to Firebase. Entries in the data object will be reactive within Vue, but will not by default be synced to the server. Component properties may be firebase references or plain clientside data objects, depending on what the parent component passed down in the prop.

Some examples:

var firebaseApp = firebase.initializeApp({ ... });
var db = firebaseApp.database();

Vue.component('myComponent', {
  data: function() {return {
    foo: true,                      // <-- 'foo' will not be synced
  }},
  firebase: function() {return {    // (vuefire hook)
    bar: db.ref('path/to/bar')      // <-- 'bar' will be synced
  }},
  mounted: function() {return {
    this.$bindAsArray('baz',db.ref('path/to/baz')) // <-- 'baz' will be synced
    // ($bindAs is also from vuefire)
  }},
  props: [qux] // <-- depends on what the parent component passed down 
}

Upvotes: 1

Related Questions