CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasevue.jsvuejs2
gvon79
gvon79

Reputation: 662

Update value using the direct path instead of "an object"

is it possible to update a direct path in firebase instead of the object of the path?

for example, instead of this: (which works)

newsRef = db.ref("/news")
newsRef.update({
            image: imageURL
          });

do something like this? (which does not work)

newsRef = db.ref("/news/image")
    newsRef.update(imageURL)

Upvotes: 0

Views: 68

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83093

As said in the comments, the first argument for the update method must be an object containing the children to replace.

You have two solutions:

1/ Passing the props as a string (Not the most elegant.... but if you really want)

You pass only one string prop to your component as follow:

<upload-component path="/news/image"></upload-component>

and in the component:

  props: ['path'],
  ....

  methods: {
    saveToDb: function (imageUrl) {
      
        const pathElems = this.path.split('/');

        const ref = firebase.database().ref(pathElems[1]);

        const imageObj = {};  
        imageObj[pathElems[2]] = imageURL;  //Using the square brackets method 
        ref.update(imageObj);

    }
  }

2/ Passing the props as an object

See the Vue.js doc https://v2.vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

imageProps: {
  node: '/news',
  key: 'image'
}

then

<upload-component v-bind="imageProps"></upload-component>

and in the component:

  methods: {
    saveToDb: function (imageUrl) {
      
        const ref = firebase.database().ref(this.node);

        const imageObj = {};  
        imageObj[this.key] = imageURL; 
        ref.update(imageObj);

    }
  }

Upvotes: 1

Related Questions