[Vue] VueFire – CRUD on RTDB

 Vue.js   Firebase   VueFire

▌Introduction

---

We will implement the CRUD functions on RTDB by VueFire.

▋Related articles

1.  [Vue] VueFire – Firebase Auth and RTDB

2.  [Vue] VueFire – CRUD on RTDB

3.  [Vue] Vuex – basis

4.  [Vue] Vuex – advanced

5.  [Vue] Shopcart example with VueFire and Vuex

6.  [Vue] Shopcart example with Firebase Cloud Messaging and Functions (1)

7.  [Vue] Shopcart example with Firebase Cloud Messaging and Functions (2)

8.  [Vue] Shopcart example with Firebase Cloud Messaging and Functions (3)

▌Environment

---

▋Vue.js 2.5.11

▋Vue CLI 3.2.1

▋Firebase Javascript SDK 5.5.8

▋VueFire 1.4.5

▌Implement

---

▋Read

In previous article: [Vue] VueFire – Firebase Auth and RTDB

We learned how to do Array/Object bindings in Vue instance’s prop: firebase, as following,

new Vue({

    el: "#app",

    firebase: {

      fbArray: firebaseDb.ref('Demo/products').limitToLast(10), //bind as an array

      fbObject: {

        source: firebaseDb.ref('Demo/products/800afd3c-1615-49ba-b33d-497842af6c82'),

        asObject: true, //Bind as object

        cancelCallback: function () { },

        readyCallback: function () { }

    }

  }

});

We can also use the VueFire API to do the same thing,

this.$bindAsArray('fbArray', firebaseDb.ref('Demo/products').limitToLast(25));

this.$bindAsObject('fbObject', firebaseDb.ref('Demo/products').child('800afd3c-1615-49ba-b33d-497842af6c82'));

Notice that every object of Array/Object bindings has the other properties:

.key	The key
.value	Store the value on this prop When the value is not an object, such as String/Boolean/Number.

Use this.$firebaseRefs.<variable name> to get the values of Array/Object bindings variables.

For example,

let ref = this.$firebaseRefs.fbObject

▋Remove

First do Array/Object bindings and then call the API: remove()

this.$bindAsObject(

    'removeObject',

    firebaseDb.ref('Demo/products').child(key));

this.$firebaseRefs.removeObject.remove().then(()=>{

    alert("The data has been removed!");

    this.$unbind('removeObject');

});

▋Create

There are two ways to create data:

1.  Object bindings then Set

2.  Array bindings then Push

▋Object bindings then Set

Assign the key for the new data in Object bindings and then call the set method to write the entire data to the key.

WARNING! The whole data of the key will be overwrite!

this.$bindAsObject(

    "fbObject",

    firebaseDb.ref("Demo/products").child(this.prod.id)

);

this.$firebaseRefs.fbObject

    .set(this.prod)

    .then(() => {

        alert("The data has been saved!");

    })

    .catch(e => console.error("Error! Access denied!"));

▋Array bindings then Push

this.$bindAsArray('fbArray', firebaseDb.ref('Demo/products'));

this.$firebaseRefs.fbArray.push(this.prod);

▋Update

There are two ways to update a data:

1.  Set and overwrite

2.  Just update the specific property’s value

▋Set and overwrite

The whole data will be overwrite by doing set.

Notice that you have to remove the property: .key before doing set.

let updatedObject = { ... };

delete updatedObject[".key"]; //Must remove the ".key" property, see https://github.com/vuejs/vuefire#data-normalization

this.$firebaseRefs.fbObject

    .set(updatedObject)

    .then(() => {

        alert("The data has been saved!");

    })

    .catch(e => console.error("Error! Access denied!"));

▋Just update the specific property’s value

We can use Object bindings on certain property within a data, and only set the property’s value.

For example, the following codes just update the value of prop: title.

this.$bindAsObject("myProp", firebaseDb.ref("Demo/products").child(key) + "/title"));

this.$firebaseRefs.myProp.set("Hello, Vuejs!");

▌Reference

---

▋GitHub - vuejs/vuefire: Firebase bindings for Vue.js