Axios and Vue.js render form submission errors

Question

I'm trying to render the error messages coming back from the server on a failed form submission using vue.js and axios.

COMPONENT:

<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 ERRORS

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

As you can see I'm trying to render the {{ errors }} object just to get started but no errors are showing up on the page even if the server sent back some?

Just to be clear. How can I take the form validations coming back from the server and display them on the form if any exist? Using Vue.js and Axios. Thanks for the help!

What does the response from the server look like when validation fails? — Ohgodwhy
– Ohgodwhy, Commented Feb 3, 2018 at 16:27
Not sure if it already does, but your server must respond with an error HTTP status code for axios to throw an error you can catch. E.g. 400, 401, 422, 500 etc. — JJWesterkamp
– JJWesterkamp, Commented Feb 3, 2018 at 16:30

PatrickSteele · Accepted Answer · 2018-02-03 16:55:40Z

1

Look carefully at your console log for the response data:

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

Now look at your v-if directive:

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

As you can see in the console log, your response has no length property so the div will not show. You initialize errors to be an empty array, but your response is returning an object, not an array.

You either need to fix your server call to return an array of errors or change your v-if directive and omit the check on the length property.

answered Feb 3, 2018 at 16:55

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bitwise · Accepted Answer · 2018-02-03 16:40:00Z

1

I'm not sure is this is the most idiomatic way of going about this, but this will at least get the message to the form:

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

answered Feb 3, 2018 at 16:40

Bitwise

8,52126 gold badges81 silver badges179 bronze badges

Collectives™ on Stack Overflow

Axios and Vue.js render form submission errors

COMPONENT:

CONSOLE.LOG ERRORS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

COMPONENT:

CONSOLE.LOG ERRORS

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related