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

Question

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

组件：

<template>
  <div>
    <p>Sign Up</p>

    <form v-on:submit.prevent="onSubmit">
      <div>
        <label>Email:</label>
        <input type="text" name="user[email]" ref="user_email" />
      </div>
      <div>
        <label>Password:</label>
        <input type="text" name="user[password]" ref="user_password" />
      </div>
      <div>
        <input type="submit"/>
      </div>
    </form>

    <ul v-if="errors && errors.length">
        {{ errors }}
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        errors: []
      }
    },
    methods: {
      onSubmit: function () {
        axios.post('/users', {
          user: {
            email: this.$refs.user_email.value,
            password: this.$refs.user_password.value
          }
        })
        .then(response => {
        })
        .catch(error => {
          console.log(error.response.data.errors)
          console.log(error.response.status)
          this.errors = error.response.data.errors
        })
      }
    }
  }
</script>

CONSOLE.LOG 错误

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

如您所见，我正在尝试呈现 {{ errors }} 对象只是为了开始，但即使服务器发回一些错误，页面上也没有显示任何错误？

澄清一下。如果存在，我如何获取从服务器返回的表单验证并将它们显示在表单上？使用 Vue.js 和 Axios。感谢您的帮助！

Answer 1

我不确定这是否是最惯用的处理方式，但这至少会将消息发送到以下表单：

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

Answer 2

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

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

现在看看你的 v-if 指令：

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

如您在控制台日志中所见，您的响应没有 length 属性，因此 div 不会显示。您将 errors 初始化为一个空数组，但您的响应是 return 对象，而不是数组。

您要么需要修复对 return 错误数组的服务器调用，要么更改 v-if 指令并省略对 length 属性的检查。

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

Axios and Vue.js render form submission errors

javascript

vue.js

axios

组件：

CONSOLE.LOG 错误