title: How to display validation errors in laravel blade with vuejs
body: <p>I have a laravel view which has a form and I want to use axios to send the form.</p>
  <p>If there are errors returned in the post response it should show the errors in the correct places.</p>
  <p>I am getting 2 errors and I'm not sure how to fix them</p>
  <blockquote>
  <p>[Vue warn]: Property or method &quot;errors&quot; is not defined on the instance
  but referenced during render.</p>
  <p>[Vue warn]: Error in render: &quot;TypeError: Cannot read property 'title'
  of undefined&quot;</p>
  </blockquote>
  <p>Here is my blade</p>
  <pre><code>@extends('layouts.admin')
  
  @section('content')
  &lt;h1 class=&quot;h3 mb-3 text-gray-800&quot;&gt;News&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quisquam ut perspiciatis, repudiandae nulla animi iste vel, praesentium repellendus molestias aliquid consequatur, earum rem qui error voluptates eius enim consequuntur!&lt;/p&gt;
  &lt;div id=&quot;news-form&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-8&quot;&gt;
              &lt;form @submit.prevent=&quot;submit&quot; method=&quot;POST&quot;&gt;
  
                  &lt;div class=&quot;form-group row&quot; v-bind:class=&quot;{ ' has-error': errors.title }&quot;&gt;
                      &lt;label for=&quot;inputName&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Title&lt;/label&gt;
                      &lt;div class=&quot;col-sm-8&quot;&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;News Title&quot; v-model=&quot;news.title&quot;&gt;
                          &lt;form-error v-if=&quot;errors.title&quot; :errors=&quot;errors&quot;&gt;
                              @{{ errors.title }}
                          &lt;/form-error&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                   &lt;div class=&quot;form-group row&quot; v-bind:class=&quot;{ ' has-error': errors.subtitle }&quot;&gt;
                      &lt;label for=&quot;inputName&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Subtitle&lt;/label&gt;
                      &lt;div class=&quot;col-sm-8&quot;&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;News Subtitle&quot; v-model=&quot;news.subtitle&quot;&gt;
                          &lt;form-error v-if=&quot;errors.subtitle&quot; :errors=&quot;errors&quot;&gt;
                              @{{ errors.subtitle }}
                          &lt;/form-error&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                   &lt;div class=&quot;form-group row&quot; v-bind:class=&quot;{ ' has-error': errors.body }&quot;&gt;
                      &lt;label for=&quot;inputName&quot; class=&quot;col-sm-4 col-form-label&quot;&gt;Body&lt;/label&gt;
                      &lt;div class=&quot;col-sm-8&quot;&gt;
                          &lt;textarea name=&quot;body&quot; class=&quot;form-control&quot; rows=&quot;5&quot; placeholder=&quot;News body&quot; v-model=&quot;news.body&quot;&gt;&lt;/textarea&gt;
                          &lt;form-error v-if=&quot;errors.body&quot; :errors=&quot;errors&quot;&gt;
                              @{{ errors.body }}
                          &lt;/form-error&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Create Post&lt;/button&gt; 
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  
  @push('scripts')
  &lt;script src=&quot;{{ asset('js/news.js') }}&quot;&gt;&lt;/script&gt;
  @endpush
  </code></pre>
  <p>and here is my component (news.js)</p>
  <pre><code>import Vue from 'vue';
  
  // import FormError component
  import FormError from './components/FormError.vue';
  
  // get csrf token
  Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
  
  // instantiate a new Vue instance
  new Vue({
      // mount Vue to .container
      el: '#news-form',
  
     // define components
      components: {
          FormError,
      },
  
      data() {
          return {
              post: {
                  title: '',
                  subtitle: '',
                  body: '',
              },
  
              submitted: false,
  
              // array to hold form errors
              errors: {},
          }
      },
  
      methods: {
          createPost() {
              let post = this.post;
  
              axios.post('create-post', post).then(response =&gt; {
                  // form submission successful, reset post data and set submitted to true
                  this.post = {
                      title: '',
                      body: '',
                  };
  
                  // clear previous form errors
                  this.$set('errors', '');
  
                  this.submitted = true;
              }).catch(error =&gt; {
                  if (error.response.status === 422) {
                      this.errors = error.response.data.errors || {};
                  }
              });
          }
      }
  });
  </code></pre>