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

      })
    }