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

Posted 2023-02-22

【中文标题】VueJS - 如何从方法内的函数更新组件数据？

【英文标题】：VueJS - How to update component data from a function inside a method?

【发布时间】：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)=> 完成了这项工作。谢谢

【参考方案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 的答案并将其作为您问题的正确答案。