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初始化为空数组，但您的响应是返回一个对象，而不是一个数组。

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

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

组件：

CONSOLE.LOG错误

2 个答案: