处理表单验证错误5.4 + vueJS
问题描述:
我有形式create.vue这样的:处理表单验证错误5.4 + vueJS
<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>
而且我的控制器: UserCOntroller.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."]}
如何在窗体中显示? 我的脚本有什么问题?
有帮助吗?谢谢你..
答
嗨我试图复制您的脚本在我的本地。虽然在我身上运作。你可以尝试在catch中调试对象错误。发送示例结果:)
if (error.response.status = 422) {
this.errors = error.response.data;
console.log(this.errors);
}
+0
我得到响应 {电子邮件:“电子邮件已经采取”]} 和状态 422无法处理的实体 –
+0
嗨请看看这个小提琴。 https://jsfiddle.net/khenxi/ev8wvg8p/ 如果'this.errors'确实包含正确的输出,那么它应该显示 – Kzy
@Demonyowh,你是什么意思?在JS 脚本错误下面VUE标签模板 –