title: Axios and Vue.js render form submission errors
body: <p>I'm trying to render the error messages coming back from the server on a failed form submission using vue.js and axios. </p>
  
  <h3>COMPONENT:</h3>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;p&gt;Sign Up&lt;/p&gt;
  
      &lt;form v-on:submit.prevent="onSubmit"&gt;
        &lt;div&gt;
          &lt;label&gt;Email:&lt;/label&gt;
          &lt;input type="text" name="user[email]" ref="user_email" /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;label&gt;Password:&lt;/label&gt;
          &lt;input type="text" name="user[password]" ref="user_password" /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="submit"/&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;ul v-if="errors &amp;&amp; errors.length"&gt;
          {{ errors }}
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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 =&gt; {
          })
          .catch(error =&gt; {
            console.log(error.response.data.errors)
            console.log(error.response.status)
            this.errors = error.response.data.errors
          })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <h3>CONSOLE.LOG ERRORS</h3>
  
  <pre><code>{email: Array(1), password: Array(1)}
  422
  </code></pre>
  
  <p>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? </p>
  
  <p>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!</p>