如何在 promise 回调中更新 Vue 应用程序或组件的属性？

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

一种方法是在回调之外引用 this。使用回调中的引用访问目标对象上的 this。

所以尝试这样的事情：

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

如何在 promise 回调中更新 Vue 应用程序或组件的属性？

How can I update a Vue app's or component's property in a promise call back?

vue.js

vuejs2

如何在 promise 回调中更新 Vue 应用程序或组件的 属性？

How can I update a Vue app's or component's property in a promise call back?

vue.js

vuejs2

如何在 promise 回调中更新 Vue 应用程序或组件的属性？