vue.js - 応答データエラーが定義されていません

Question

ようこそ！私はスクリプトに問題があります。フォームを送信しようとすると、私はVUE開発者パネルにエラーがあります： "TypeError：error.response.data.errorsは未定義です"。私はどこに問題があるのか​​分かりません。私はvueが新鮮で少し助けが必要です。どうもありがとうございました。名前空間を2回確認したが、まだ動作していない。なぜデータのエラーが未定義であるのかわかりません。

ストアコントローラ：

public function store(Request $request) 
    { 
     $this->validate($request, [ 
     'flight_no'  => 'required|max:255', 
     'fromICAO' => 'required', 
    ]); 

    $roster = Roster::create([ 
     'flight_no'=> request('flight_no'), 
     'fromICAO' => request('fromICAO') 

    ]); 

    return response()->json([ 
     'roster' => $roster, 
     'message' => 'Success' 
    ], 200); 
    } 

Roster.vue

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 " style="margin-top:10px;"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <button @click="initAddRoster()" class="btn btn-primary btn-xs pull-right" style="background-color:#bdc911; border:none"> 
          + Add New Route 
         </button> 
         Roster 
        </div> 

        <div class="panel-body"> 

        </div> 
       </div> 
      </div> 
     </div> 

     <div class="modal fade" tabindex="-1" role="dialog" id="add_roster_model"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
           aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title">Add New Route</h4> 
        </div> 
        <div class="modal-body"> 

         <div class="alert alert-danger" v-if="errors.length > 0"> 
          <ul> 
           <li v-for="error in errors">{{ error }}</li> 
          </ul> 
         </div> 

         <div class="form-group"> 
          <label for="flight_no">Flight number:</label> 
          <input type="text" name="flight_no" id="flight_no" placeholder="Flight number" class="form-control" 
            v-model="roster.flight_no"> 
         </div> 
         <div class="form-group"> 
          <label for="fromICAO">From ICAO:</label> 
          <textarea name="fromICAO" id="fromICAO" cols="30" rows="5" class="form-control" 
             placeholder="from ICAO" v-model="roster.fromICAO"></textarea> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" @click="createRoster" class="btn btn-primary">Submit</button> 
        </div> 
       </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 

    </div> 
</template> 

<script> 
    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 => { 

         this.reset(); 

         $("#add_roster_model").modal("hide"); 

        }) 
        .catch(error => { 
         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 = ''; 
      }, 
     } 
    } 
</script> 

Answer 1

はいエラー応答が404でしただからreはerror属性ではありませんので、if条件に追加することはできません。あなたはそれをデバッグする場合

ので、次の時間に、あなたはそれとしてerror.response` `の結果を共有することができconsole

.catch(error => { 
    this.errors = []; 
    // you can debug it 
    console.log(error); 
}); 

例

// this will come from the ajax 
 
var error = { 
 
    data :{ 
 
    'error' : 'some data we can see it in console' 
 
    } 
 
} 
 

 
console.log(error);

Answer 2

回答：

問題が間違っルートパスしていました：

axios.post('/roster'