Vuejs如何显示laravel输入数组验证错误
Posted
技术标签:
【中文标题】Vuejs如何显示laravel输入数组验证错误【英文标题】:Vuejs how to display laravel input array validation errors 【发布时间】:2020-02-10 07:23:15 【问题描述】:我无法在我的 Laravel 应用程序中检索到的 vue 组件中显示错误消息。
这是网络标签中的响应
message: "The given data was invalid.",…
errors: results.0.winner: ["This field is required"], results.1.winner: ["This field is required"],…
results.0.winner: ["This field is required"]
results.1.winner: ["This field is required"]
results.2.winner: ["This field is required"]
message: "The given data was invalid."
这是控制台中的错误
admin.js:59648 [Vue 警告]:渲染错误:“TypeError:无法读取 未定义的属性 '0'"
这是我的组件
<template>
<form @submit.prevent="submit" class="mb-5">
<div class="row">
<div v-for="(setting, index) in settings">
<div class="card">
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" v-model="setting.number">
<div v-if="errors && errors.results[index].winner" class="text-danger"> errors.results[index].winner </div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<button type="submit" class="btn btn-primary">
Save Results
</button>
</div>
</div>
</form>
</template>
<script>
export default
props:
settings:
type: Array,
default: () => []
,
,
data: function()
return
errors: ,
,
mounted()
,
methods:
submit: function()
let results = [];
this.settings.forEach(function(item)
results.push(
prize: item.prize,
winner: item.number
);
);
axios.post('save', results: results).then(response =>
if(response.status === 200)
//window.location.href = '/admin/lottery'
).catch(error =>
if (error.response.status === 422)
this.errors = error.response.data.errors ||
);
,
,
;
</script>
如果它对我的 laravel 功能有帮助
public function store(Request $request)
$request->validate([
'results.*.winner' => 'required|gt:0',
],
[
'results.*.winner.required' => 'This field is required',
]);
【问题讨论】:
【参考方案1】:你使用的索引键
errors.results[index].winner
属于可迭代变量设置,虽然你认为你确定交集匹配,但不推荐这样做,我认为这里是“渲染错误”。
你必须编码:
<div v-for="(result, index) in errors.results">
<div class="card">
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" v-model="setting.number">
<div class="text-danger"> result.winner </div>
</div>
</div>
</div>
</div>
代替:
<div v-for="(setting, index) in settings">
<div class="card">
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" v-model="setting.number">
<div v-if="errors && errors.results[index].winner" class="text-danger"> errors.results[index].winner </div>
</div>
</div>
</div>
</div>
【讨论】:
如果没有错误怎么办。这还会渲染吗? 我的方法在不同的列表中定义渲染错误。如果您想在输入下方(以及每个字段)呈现错误,一个解决方案是,在 axios 的捕获中,调用新函数,并在此处检查索引错误,如果存在则将值添加到新属性设置 [index].error,这样,您就可以确保 setting.error 存在。以上是关于Vuejs如何显示laravel输入数组验证错误的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 vuejs 在 laravel 刀片中显示验证错误
如何在 laravel 中输入所有数组并在字段下方显示验证错误