javascript - vue.js - 响应数据错误未定义

Question

欢迎!我的脚本有问题。当我尝试提交表单时，VUE 开发人员面板中出现错误:“TypeError:error.response.data.errors 未定义”。我不知道问题出在哪里。我对 vue 很陌生，需要一点帮助。非常感谢。我检查了两次命名空间，但仍然无法正常工作。我找不到为什么数据错误未定义。

商店 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>

Answer 1

是的，错误响应为 404，因此响应中没有 error 属性，因此您无法将其添加到 if 条件。

所以下次如果你想调试它，你可以使用控制台

.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);