Vue.js 如何在 Promise 回调中更新 Vue 应用程序或组件的属性

发布于03月04日

我需要更新Firebase回调中的Vue属性，如下所示，但它不起作用.这个代码

methods: {
    sign_out : function(e) {
        this.item_count = 0
    }
}

有效，但在promise 回调中设置属性时:

methods: {
  sign_out : function(e) {
  firebase.auth().signOut().then(function() {
      this.item_count = 0
    })
  },

在这种情况下，如何设置属性的值？

推荐答案

回调中的this指向错误的对象.有几种方法可以解决这个问题.

一次抓捕this人.

methods: {
  sign_out : function(e) {
    var self = this;
    self.item_count = 0
    firebase.auth().signOut().then(function() {
      self.item_count = 0
  })
}

使用粗箭.

methods: {
  sign_out : function(e) {
    this.item_count = 0
    firebase.auth().signOut().then(() => this.item_count = 0)
  }
}

使用bind().

methods: {
  sign_out : function(e) {
    this.item_count = 0
    firebase.auth().signOut().then(function() {
      this.item_count = 0
    }.bind(this))
}

胖箭头还不能在所有现代浏览器中使用，所以只有在编译到es5时才使用它们.