javascript - Vee validate 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>

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