在Vue中的方法内部调用方法

Question

I have methods:

methods: {
  submit () {
    this.loading = true
    setTimeout(function () {
      this.loading = false
      this.success() // how to call success() ?
    }, 3000)
  },
  success() {
    this.$store.dispatch('Auth/register', this.register)
  }
}

How do I call success() ? My error this.after is not a function

Answer 1

You need to use an arrow function to preserve the this context:

setTimeout(() => {
  this.loading = false
  this.success();  // this is fine
}, 3000)

Otherwise the callback function injects its own this

Answer 2

Although using arrow function is the best way to achieve this, you can store this inside a const before calling setTimeout method:

methods: {
  submit () {
    const _self = this
    _self.loading = true
    setTimeout(function () {
      _self.loading = false
      _self.success()
    }, 3000)
  },
  success() {
    this.$store.dispatch('Auth/register', this.register)
  }
}