Greetings! I've encountered a script issue while trying to submit a form in VUE. The error message displayed in the developer panel states: "TypeError: error.response.data.errors is undefined". As a newcomer to Vue, I'm seeking some assistance as I can't seem to pinpoint the problem. Despite checking namespaces multiple times, the issue persists. It's perplexing why the data errors are showing up as undefined.
Store controller:
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">×</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>