在 laravel 5.4 + vueJS 中处理表单验证错误

Question

我有这样的 create.vue 表单：

    <template>
    <div>
        <div v-if="message" class="alert alert-success">
            {{ message }}
        </div>

        <form @submit.prevent="store" action="/user" method="post">
            <div :class="['form-group', errors.name ? 'has-error' : '']">
            <!--<div class="form-group">-->
            <label>Full name</label>
                <input v-model="state.name" type="text" class="form-control">
                <span v-if="errors.name" class="label label-danger">{{ errors.name[0] }}</span>
                <!--<span class="label label-danger">{{ errors(errors.name) }}</span>-->
            </div>

            <div :class="['form-group', errors.email ? 'has-error' : '']">
            <!--<div class="form-group">-->
                <label>Email</label>
                <input v-model="state.email" type="email" class="form-control">
                <span v-if="errors.email" class="label label-danger">{{ errors.email[0] }}</span>
                <!--<span class="label label-danger">{{ errors(errors.email) }}</span>-->
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
                <!--<router-link :to="{ name: 'userIndex' }">Back to index</router-link>-->
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            errors: [],
            user: [],
            state: {
                name: '',
                email: ''
            }
        }
    },

    methods: {
        store(e) {
            axios.post(e.target.action, this.state).then(response => {
                this.errors = [];

                this.state = {
                    name: '',
                    email: ''
                }

                this.message = 'User has been created.';
            }).catch(error => {
                if (! _.isEmpty(error.response)) {
                    if (error.response.status = 422) {
                        this.errors = error.response.data;
                    }
                }
            });
        }
    }
}
</script>

还有我的控制器： 用户控制器.php

public function store(Request $request)
     {
         $this->validate($request, [
             'name'  => 'required|string|max:50',
             'email' => 'required|email|unique:users,email',
         ]);

         $user = User::create([
             'name'     => $request->name,
             'email'    => $request->email,
             'password' => bcrypt(str_random()),
         ]);

         return response()->json($user);
     }

当我键入类似于曾经存在的内容（唯一）时，我在控制台响应中收到错误文本，但不像往常那样以形式显示。我在控制台中遇到这样的错误：

{"email":["The email has already been taken."]}

如何在表单中显示？ 我的脚本有什么问题？

有什么帮助吗？之前谢谢你..

Answer 1

您好，我尝试在本地复制您的脚本。虽然在我身上工作。你能尝试调试 catch 中的对象错误吗？发送样本结果:)

if (error.response.status = 422) {
    this.errors = error.response.data;
    console.log(this.errors);                             
}