отображение ошибок аутентификации в компоненте входа Vue, не работающем с помощью push

Question

Я новичок в Laravel и Vue, я прохожу курс в Udemy, пытаюсь отобразить неудачный ответ об ошибке аутентификации в компоненте Vue, используя push, если ошибка 422 (это только для тестирования чтобы узнать, работает ли push или будет ли выполняться код, если он будет использован позже. Код будет реорганизован).

Я провел некоторое исследование и в настоящее время не нашел помощи, может кто-нибудь помочь.

<template>


 <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
      <div class="card card-shadowed p-50 w-400 mb-0" style="max-width: 100%">
          <h5 class="text-uppercase text-center">Login</h5>
          <br><br>
    <form>
      <ul class="list-group alert alert-danger" v-if="errors.length > 0">
        <li class="list-group-item" v-for="error in errors" :key="errors.indexOf(error)">
           {{ error }}
        </li>
            </ul>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Email" v-model="email">
            </div>

            <div class="form-group">
              <input type="password" class="form-control" placeholder="Password" v-model="password">
            </div>

            <div class="form-group flexbox py-10">
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input"  v-model="remember" checked>
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Remember me</span>
              </label>

              <a class="text-muted hover-primary fs-13" href="#">Forgot password?</a>
            </div>

            <div class="form-group">
              <button class="btn btn-bold btn-block btn-primary" @click="attemptLogin()" :disabled="!isValidLoginForm()" type="button">Login</button>
            </div>
          </form>
          <p class="text-center text-muted fs-13 mt-20">Don't have an account? <a href="page-register.html">Sign up</a></p>
        </div>
      </div>
    </div>
    </template>

    <script>
        import axios from 'axios';
        import qs from 'qs';
        export default {
            mounted() {
                console.log('Component mounted.')
            },
            data() {
              return {
                email: '',
                password: '',
                remember: true,
                loading: false,
                errors: [],
              }
            },
            methods: {
              emailIsValid() {
               if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
                  return true
                } else {
                  return false
                }
              },

              isValidLoginForm() {
                return this.emailIsValid() && this.password && !this.loading
              },

              attemptLogin() {


      var the_data = {
                  email: this.email,
                  password: this.password,
                  remember: this.remember,
                }
                this.errors = [];
                this.loading = true;
                axios.post('/login', the_data)
                .then(function (response) {
                  location.reload();
                })
                .catch(function (error) {
                  this.loading = false;
                  if (error.response.status == 422) {
                    this.errors.push("We couldn't verify your account details.");
                  } else {
                    this.errors.push("Something went wrong, please refresh and try again.");
                  }
                });
              }
            },

            // computed: {
            //
            // },
        }
    </script>

Я не вижу ошибок в своем представлении, когда я ввел неправильные учетные данные пользователя, но консоль выдает ответ 422 об ошибке (мне нужно, чтобы в предупреждении отображался читаемый ответ, например, мы не смогли проверить данные вашей учетной записи, но нет удачи), пожалуйста, помогите просмотреть этот код:

Answer 1

После удаления qs.stringify, как предложено @Noogen выше; по какой-то причине изменение структуры блоков then и catch решило проблему (теперь выводит ошибку консоли 422 и передает ошибку компоненту, как и ожидалось): `

 attemptLogin() {
    var the_data = {
      email: this.email,
      password: this.password,
      remember: this.remember,
    }
    this.errors = [];
    this.loading = true;
    axios.post('/login', the_data)
    .then(response => {
      location.reload();
    })
    .catch(error => {
      this.loading = false;
        console.log(error.response)
        if (error.response.status == 422) {
           this.errors.push("We couldn't verify your account details.");
         } else {
           this.errors.push("Something went wrong, please refresh and try again.");
         }
    });
  }
},`