Question

我需要更新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
    })
  },

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

Answer 1

你的回调中的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时才使用它们。

Answer 2

一种方法是在回调之外引用它。使用回调内部的引用来访问目标对象上的引用。

所以尝试类似：

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

如何在承诺回拨中更新Vue应用程序或组件的属性？

2 个答案: