title: vue.js - response data error undefined
body: <p>Welcome ! I have a problem with script. When i try to submit form i have an error in VUE developer panel : "TypeError: error.response.data.errors is undefined". I can't figure out where is the problem.I'm fresh in vue and need a little bit help. Thank you very much. I checked twice namespaces and it's still not working. I can't find why data errors are undefined.</p>
  
  <p>Store controller:</p>
  
  <pre><code>public function store(Request $request)
      {
        $this-&gt;validate($request, [
          'flight_no'        =&gt; 'required|max:255',
          'fromICAO' =&gt; 'required',
      ]);
  
      $roster = Roster::create([
          'flight_no'=&gt; request('flight_no'),
          'fromICAO' =&gt; request('fromICAO')
  
      ]);
  
      return response()-&gt;json([
          'roster'    =&gt; $roster,
          'message' =&gt; 'Success'
      ], 200);
      }
  </code></pre>
  
  <p>Roster.vue </p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 " style="margin-top:10px;"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;button @click="initAddRoster()" class="btn btn-primary btn-xs pull-right" style="background-color:#bdc911; border:none"&gt;
                              + Add New Route
                          &lt;/button&gt;
                          Roster
                      &lt;/div&gt;
  
                      &lt;div class="panel-body"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="modal fade" tabindex="-1" role="dialog" id="add_roster_model"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span
                                  aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                          &lt;h4 class="modal-title"&gt;Add New Route&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
  
                          &lt;div class="alert alert-danger" v-if="errors.length &gt; 0"&gt;
                              &lt;ul&gt;
                                  &lt;li v-for="error in errors"&gt;{{ error }}&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                              &lt;label for="flight_no"&gt;Flight number:&lt;/label&gt;
                              &lt;input type="text" name="flight_no" id="flight_no" placeholder="Flight number" class="form-control"
                                     v-model="roster.flight_no"&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="fromICAO"&gt;From ICAO:&lt;/label&gt;
                              &lt;textarea name="fromICAO" id="fromICAO" cols="30" rows="5" class="form-control"
                                        placeholder="from ICAO" v-model="roster.fromICAO"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;button type="button" @click="createRoster" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
              &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;&lt;!-- /.modal --&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data(){
              return {
                  roster: {
                      flight_no: '',
                      fromICAO: ''
                  },
                  errors: []
              }
          },
          methods: {
              initAddRoster()
              {
                  this.errors = [];
                  $("#add_roster_model").modal("show");
              },
              createRoster()
              {
                  axios.post('/roster', {
                      flight_no: this.roster.flight_no,
                      fromICAO: this.roster.fromICAO,
                  })
                      .then(response =&gt; {
  
                          this.reset();
  
                          $("#add_roster_model").modal("hide");
  
                      })
                      .catch(error =&gt; {
                          this.errors = [];
                          if (error.response.data.errors.flight_no) {
                              this.errors.push(error.response.data.errors.flight_no[0]);
                          }
  
                          if (error.response.data.errors.fromICAO) {
                              this.errors.push(error.response.data.errors.fromICAO[0]);
                          }
                      });
              },
              reset()
              {
                  this.roster.flight_no = '';
                  this.roster.fromICAO = '';
              },
          }
      }
  &lt;/script&gt;
  </code></pre>