如何在 vuejs / Laravel 中验证动态输入

Question

我通过拦截器和 UI 的 Toast 捕获错误。通常，拦截器会捕获错误，并通过一次性输入的 toast 显示错误，我正在尝试捕获不确定数量的输入的错误。到目前为止，循环遍历输入数组并设置规则不起作用。Component.vue

<template>
<div>
<div class="form-group" v-for="(input,k) in inputs" :key="k">
<input type="text" id="name" placeholder="Name" v-model="input.name" />
<span>
<i class="fas fa-minus" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)"></i>
<i class="fas fa-plus" @click="add(k)" v-show="k == inputs.length-1"></i>
</span>
</div>
<button @click="addName">Create</button>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [{name: ''}]
}
},
methods: {
add(index) {
this.inputs.push({ name: ''});
console.log( this.inputs);
},
remove(index) {
this.inputs.splice(index, 1);
},
addName() {
axios.post('/user', {userinputs:this.inputs}).then(response => {})
.catch(error => {
console.log(error);
});
}
}
}
</script>

Controller：

public function store(Request $request)
{
$rules = [
'userinputs' => 'required|max:255',
];
foreach ($request->input('userinputs') as $key => $my_object_in_array) {
$rules[$my_object_in_array['name']] = 'required|max:10';
}
return $rules;
}

Answer 1

我希望这是你想要实现的。

public function store(Request $request)
{
$rules = [
'userinputs.*.name' => 'required|max:255',
];
$validator = IlluminateSupportFacadesValidator::make($request->all(), $rules);
if ($validator->fails()) {
//Return the errors as JSON
return response()->json(['success' => 'false', 'errors' => $validator->errors()], 400);
}
//Do something
return ['success' => 'true'];
}