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 验证数组

如何使用 vuejs 在 laravel 刀片中显示验证错误

如何在 laravel 中输入所有数组并在字段下方显示验证错误

如何显示输入数组的验证错误?

如何将数组数据从 vuejs 传递到 laravel api 控制器

如何在 Vue.js 中显示错误数组?使用 Laravel 进行后端验证