带有加载程序的 Vuetify 按钮继续处于加载状态答案

【问题标题】：Vuetify button with loader continue in loading state带有加载程序的 Vuetify 按钮继续处于加载状态
【发布时间】：2020-04-24 15:04:49
【问题描述】：

我用按钮加载器制作了简单的 vuetify 登录表单。但是通过 axios 发送 POST 请求后，按钮不会恢复到正常状态。它继续加载状态。

<v-btn color="primary" block x-large depressed :loading="loading" :disabled="loading" color="secondary" @click="submit">Sign In</v-btn>

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            email: 'admin@example.com',
            password: '',
            loading: false
        }
    },
    methods: {
        submit() {
            this.loading = true;
            axios({
                method: 'post',
                url: remote_url,
                data: {
                    username: this.email,
                    password: this.password
                }
            })
                .then(function (response) {
                    this.loading = false;               
                    console.log(response.data);
                })
                .catch(function (response) {
                    this.loading = false;                   
                });
        }
    }
})

我是不是做错了什么？

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

正确的解决方案是：

this.loading = true;
axios({
  method: 'post',
  url: remote_url,
  data: {
    username: this.email,
    password: this.password
  }
})
.then((response) => {            
  // response handler
})
.catch((error) => {
  // error handler
})
.finally(() => {
  this.loading = false;                   
});

知道，如果你使用function () {}，你的作用域将会改变：

myFunction()
  .then(function () {
    // myfunction() scope
    // this = myFunction prototype
  })

myFunction()
  .then(() => {
    // stay in current scope
  })

【讨论】：