vue.js-響應數據錯誤未定義

Question

歡迎您！ 我的腳本有問題。 當我嘗試提交表單時，在VUE開發人員面板中出現錯誤：“ TypeError：error.response.data.errors未定義”。 我不知道問題出在哪里，我很新鮮，需要一點幫助。 非常感謝你。 我檢查了兩次命名空間，但仍然無法正常工作。 我找不到為什么未定義數據錯誤的原因。

商店控制器：

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

名冊

<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條件。

所以下次如果要調試它，可以使用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'