VueJS - 如何從方法內的 function 更新組件數據？

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

      })
    }

或將回調用作箭頭 function (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您的 function：

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

到搜索 function 添加對組件的引用

thisComponent = this

然后在 function 內部（快照）

use thisComponent.searchData.keyword = (whatever)