vue.js - response data error undefined

Question

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.

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">&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>

can you share result of error.response as it might be going in .catch so just for cross checking if errors are exists in response error — Hardik Satasiya
– Hardik Satasiya, Commented Dec 26, 2017 at 10:50
@HardikSatasiya can you tell me how to do it? i'm really fresh and learning vue. — tomczas
– tomczas, Commented Dec 26, 2017 at 10:52
@HardikSatasiya if i figured it out ok the error is : status: 404 statusText: "Not Found" — tomczas
– tomczas, Commented Dec 26, 2017 at 11:04

Hardik Satasiya · Accepted Answer · 2017-12-26 11:51:15Z

2

yes error response was 404 so there is not error attribute in response so you can not add it to if condition.

so to next time if you want to debug it you can use console

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

example

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

console.log(error);

answered Dec 26, 2017 at 11:51

Hardik Satasiya

9,7253 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomczas · Accepted Answer · 2017-12-26 11:19:52Z

0

Answer:

Problem was with the incorrect route path:

axios.post('/roster'

answered Dec 26, 2017 at 11:19

tomczas

1791 gold badge4 silver badges20 bronze badges

Collectives™ on Stack Overflow

vue.js - response data error undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related