VueJS - 如何从方法内的函数更新组件数据？答案

【问题标题】：VueJS - How to update component data from a function inside a method?VueJS - 如何从方法内的函数更新组件数据？
【发布时间】：2020-08-03 01:14:01
【问题描述】：

我正在尝试使用 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 但没有用。我该怎么做？

【问题讨论】：

console.log(snapshot.val()) 返回什么？数组还是对象？
@palash 它是一个对象数组
什么是 console.log( this ) 里面 search () 在开始和里面 .on('value', function (snapshot){ ... ？请在主帖中发布图片。
@palaѕн 我解决了。 (snapshot)=>{} 完成了这项工作。谢谢

标签： javascript firebase vue.js firebase-realtime-database vuejs2

【解决方案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()

      })
    }

【讨论】：

我试过了，但它说Cannot set property 'listings' of null
null 或 undefined ？你添加let vm =this;了吗？
@SuvinNimnakaSukka 这是不可能的，因为vm这里指的是vue实例。
@Boussadjra null 。是的，我也添加了这个
@palaѕн 你是什么意思？

【解决方案2】：

向搜索功能添加对组件的引用

thisComponent = this

然后在函数内部（快照）

use thisComponent.searchData.keyword = (whatever)

【讨论】：

【解决方案3】：

一种方法是将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

【讨论】：

没用 :( 但是@Boussadjra 提供了一个带有箭头功能的解决方案，它有效。谢谢
好的！很高兴知道！ :) 不要忘记支持@Boussadjra 的答案并将其作为您问题的正确答案。