javascript - 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?

Answer 1

Waitting for answers