VueJS - How to update component data from a function inside a method?

Question

I'm trying to do a search using Firebase. I have this in my VueJS Code.

export default {
  data () {
    return {
      listings: [],
      searchData: {
        keyword: ""
      }
    }
  },
  name: 'SearchScreen',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  firebase: {
    listings: listingsRef
  },
  methods: {
    search () {
      console.log(this.searchData.keyword)
      listingsRef.orderByChild('location').equalTo(this.searchData.keyword).on('value', function (snapshot){
        console.log(snapshot.val())
        return{
          listings: snapshot.val()
        }
      })
    }
  }
}

Now when I do the console.log It successfully filters out data and shows the response in the console. But I couldn't update the 'listings' in component data with the response I got from Firebase. Tried this.listing but didn't work. How can I do this?

What does console.log(snapshot.val()) returns? array or object? — palaѕн
– palaѕн, Commented Apr 20, 2020 at 13:53
What is console.log( this ) inside search () at start and inside .on('value', function (snapshot){ ... ? Please post the images in your main post. — palaѕн
– palaѕн, Commented Apr 20, 2020 at 14:14
@palaѕн I solved it. (snapshot)=>{} did the work. Thanks — Suvin Nimnaka Sukka
– Suvin Nimnaka Sukka, Commented Apr 20, 2020 at 15:11

Boussadjra Brahim · Accepted Answer · 2020-04-20 14:10:23Z

3

You should assign this (component instance) to a global variable vm and then in the callback assign that snapshot.val() to the listing data property as follows :

 search () {
      console.log(this.searchData.keyword)
       let vm =this;
      listingsRef.orderByChild('location').equalTo(this.searchData.keyword).on('value', function (snapshot){
        console.log(snapshot.val())

          vm.listings= snapshot.val()

      })
    }

or use the callback as an an arrow function (snapshot)=>{} :

 search () {
      console.log(this.searchData.keyword)
      listingsRef.orderByChild('location').equalTo(this.searchData.keyword).on('value',  (snapshot)=>{
        console.log(snapshot.val())

          this.listings= snapshot.val()

      })
    }

edited Apr 20, 2020 at 14:10

answered Apr 20, 2020 at 13:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Suvin Nimnaka Sukka Over a year ago

I tried but it says Cannot set property 'listings' of null

Boussadjra Brahim Over a year ago

of null or undefined ? did you add let vm =this;?

palaѕн Over a year ago

@SuvinNimnakaSukka This is not possible, as vm here refers to the vue instance.

Suvin Nimnaka Sukka Over a year ago

@Boussadjra null . Yes I added that too

Suvin Nimnaka Sukka Over a year ago

@palaѕн what do you mean?

|

Laerte · Accepted Answer · 2020-04-20 14:24:29Z

1

One way to do that is to bind this to your function:

listingsRef.orderByChild('location').equalTo(this.searchData.keyword).on('value', function (snapshot){
    this.listings = snapshot.val()
}.bind(this))

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

answered Apr 20, 2020 at 14:24

Laerte

7,0833 gold badges35 silver badges52 bronze badges

2 Comments

Suvin Nimnaka Sukka Over a year ago

Didnt work :( But @Boussadjra gave a solution with an arrow function and it worked. Thanks

Laerte Over a year ago

Ok! Nice to know! :) Don't forget to upvote @Boussadjra 's answer and accept it as the correct answer to your question.

matthias_h · Accepted Answer · 2020-04-20 18:08:47Z

-1

to the search function add a reference to the component

thisComponent = this

then inside the function (snapshot)

use thisComponent.searchData.keyword = (whatever)

edited Apr 20, 2020 at 18:08

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

answered Apr 20, 2020 at 13:57

Eitan Yarimi

211 bronze badge

Collectives™ on Stack Overflow

VueJS - How to update component data from a function inside a method?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related