VueJS - Как обновить данные компонента из функции внутри метода?

Question

Я пытаюсь сделать поиск, используя Firebase. У меня есть это в моем VueJS коде.

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()
        }
      })
    }
  }
}

Теперь, когда я делаю console.log, он успешно отфильтровывает данные и показывает ответ в консоли. Но я не смог обновить «списки» в данных компонентов ответом, полученным от Firebase. Пробовал this.listing, но не сработало. Как я могу это сделать?

Answer 1

Вы должны присвоить this (экземпляр компонента) глобальной переменной vm, а затем в обратном вызове присвоить snapshot.val() свойству данных listing следующим образом:

 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()

      })
    }

или использовать функцию обратного вызова в качестве функции стрелки (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()

      })
    }

Answer 2

Один из способов сделать это - привязать this к вашей функции:

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 3

к функции поиска добавьте ссылку на компонент

thisComponent = this

, затем внутри функции (снимок)

use thisComponent.searchData.keyword = (whatever)