Кнопка Vuetify с загрузчиком продолжается в состоянии загрузки

Question

Я сделал простую vuetify форму авторизации с помощью загрузчика кнопок. Но после отправки запроса POST через ax ios кнопка не возвращается в нормальное состояние. Продолжается загрузка состояния.

<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;                   
                });
        }
    }
})

Я что-то не так делаю?

Answer 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
  })

Answer 2

Вы должны использовать функцию стрелки ()=>, чтобы получить доступ к экземпляру компонента, и использовать this:

.then((response)=> {
                    this.loading = false;               
                    console.log(response.data);
                })
                .catch( (response)=> {
                    this.loading = false;                   
                });

, так как вы получаете сообщение об ошибке:

Невозможно прочитать свойство 'loading' из неопределенного