Javascript Axios和Vue.js呈现表单提交错误

我正在尝试使用vue.js和axios呈现提交表单失败时从服务器返回的错误消息

组成部分： 正如您所看到的，我试图呈现{{errors}}对象只是为了开始，但是页面上没有显示错误，即使服务器返回了一些错误

---

我只是想说清楚。如何获取从服务器返回的表单验证并将其显示在表单上（如果存在）？使用Vue.js和Axios。谢谢你的帮助

我不确定这是否是最惯用的方式，但这至少会将信息传达给表单：

    .catch(error => {
      this.errors.push(error.response.data.errors)
    })

---

请仔细查看控制台日志以获取响应数据：

{email: Array(1), password: Array(1)}

现在看看您的

v-if

指令：

<ul v-if="errors && errors.length">

正如您在控制台日志中看到的，您的响应没有

length

属性，因此

div

不会显示。您将

errors

初始化为空数组，但响应返回的是对象，而不是数组

---

您需要修复服务器调用以返回错误数组，或者更改

v-if

指令并忽略对

length

属性的检查。

验证失败时服务器的响应是什么样子的？立即更新。我将发布console.log。我不确定它是否已经发布了，但您的服务器必须响应错误HTTP状态码，以便axios抛出您可以捕获的错误。例如，400、401、422、500等。它以422作为响应

{email: Array(1), password: Array(1)}

<ul v-if="errors && errors.length">