Javascript 在Vue登录组件中显示身份验证错误无法使用推送

我是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>

登录





{{error}}


记得我吗
登录
没有帐户吗
从“axios”导入axios；
从“qs”进口qs；
导出默认值{
安装的（）{
console.log（'组件已安装'）
},
数据（）{
返回{
电子邮件：“”，
密码：“”，
记住：没错，
加载：false，
错误：[]，
}
},
方法：{
emailIsValid（）{
如果（/^\w+（[\.-]？\w+）*@\w+（[\.-]？\w+*（\.\w{2,3}）+$/.test（this.email））{
返回真值
}否则{
返回错误
}
},
isValidLoginForm（）{
返回this.emailIsValid（）&&this.password&&this.loading
},
attemptLogin（）{
var_数据={
电子邮件：this.email，
密码：this.password，
记住：这个，记住，
}
this.errors=[]；
这是。加载=真；
post（'/login'，_数据）
.然后（功能（响应）{
location.reload（）；
})
.catch（函数（错误）{
这一点：加载=错误；
if（error.response.status==422）{
this.errors.push（“我们无法验证您的帐户详细信息。”）；
}否则{
this.errors.push（“出现问题，请刷新并重试”）；
}
});
}
},
//计算：{
//
// },
}

---

当我输入错误的用户凭据时，我的视图中没有错误，但控制台输出422错误响应（我需要在警报中显示可读的响应，例如“我们无法验证您的帐户详细信息”，但没有运气）。

按照上面@Noogen的建议取出qs.stringify后；出于某种原因，更改“then and catch blocks”的结构解决了问题（现在输出422控制台错误并按预期将错误推送到组件）： `

---

您不需要

qs.stringify（the_data）

，只需传入/使用

the_data

@Noogen您是对的，我不需要它，没有它axios post就可以完美工作。但是，我的代码的这部分仍然不起作用。

.catch（函数（错误）{

`if（error.response.status==422）{`

this.errors.push（“我们无法验证您的帐户详细信息”）；

`else{``this.errors.push（“出现问题，请刷新并重试。”）；}`如果（error.response.status==422）Ok，请尝试更改

this.errors=[]；

line to

this.errors.length=0

这样您就不会覆盖正在监视的数组变量。另外，我假设您得到了422结果，但您只是没有看到错误？@Noogen是的，我在控制台中得到了422错误，但在组件中没有得到响应。出于某种原因，更改了then和catch的格式，blocks成功了。将在下面发布代码

 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.");
         }
    });
  }
},`