Vee 验证 v3 ValidationObserver 不与使用 v-for 添加的动态验证提供程序一起使用

Question

我正在使用 Vee Validate v3 验证使用 V-FOR 生成的动态输入，它根据用户操作添加或删除输入元素。

我的问题是只有最后一个输入得到验证，其他输入没有得到验证。在文档中，他们在使用 V-IF 和 V-FOR 时提到了这个问题 documentation link

他们告诉我们使用 VueJS keep-alive 组件。但不使用 V-FOR。

<validation-observer ref="observer" v-slot="{ handleSubmit }">
<form method="POST" action="{{ route('app.store') }}" @submit.prevent="handleSubmit(onSubmit)" class="form" enctype="multipart/form-data">
    <table class="table">
        <thead>
            <tr>
                <th>SI No</th>
                <th>input 1</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in items" :key="item.id">
                <td>@{{ index + 1 }}</td>
                <td>
                    <keep-alive>
                        <validation-provider rules="required" v-slot="{ errors }" name="attribute">
                            <div class="form-group">
                                <input :name="'attribute' + item.id" class="form-control" v-model="item.attribute">
                                <span class="error" role="alert">

                                    @{{ errors[0] }}

                                </span>
                            </div>
                        </validation-provider>
                    </keep-alive>
                </td>
                <td>
                    <button type="button" class="btn btn-md btn-danger mt-4" @click="remove(index)">
                        <span class="ion-trash-a"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>


    <x-form-submit>Save</x-form-submit>

</form>

我的js代码

<script type="application/javascript">
        Vue.component('dynamic-form-wrapper', {
            template: '#dynamic-form-template',
            data() {
                return {
                    items: [
                        {
                            id: 1,
                            attribute: null,
                        },
                        {
                            id: 2,
                            attribute: null,
                        }
                    ],
                    id: 3
                }
            },
            methods: {
                async onSubmit() {
                    const valid = await this.$refs.observer.validate();
                    if (valid) {
                        document.getElementById("category-form").submit();
                        
                    }
                },
                add() {
                    this.items.push({
                        id: this.id,
                        attribute: null,
                    });
                    this.id ++;
                },
                remove(index) {
                    if (this.items.length != 1) {
                        this.items.splice(index, 1);
                    }
                }
            }
        })
    </script>

提前致谢

Answer 1

每个 ValdationProvider 都需要一个唯一的 ID。为每个验证提供者设置 :vid

<keep-alive>
    <validation-provider :vid="'attribute' + item.id" rules="required" 
        v-slot="{ errors }" name="attribute">
        <x-v-form-input type="text" v-model="item.attribute" field="attribute">
        </x-v-form-input>
    </validation-provider>
</keep-alive>

在此处参考 API vid 的文档：https://vee-validate.logaretm.com/v3/api/validation-provider.html#props

Vee 验证 v3 ValidationObserver 不与使用 v-for 添加的动态验证提供程序一起使用

Vee validate v3 ValidationObserver not working with dynamic validation provider added using v-for

javascript

laravel

laravel-blade

vuejs2

vee-validate