如何解决Vee Validate 3 验证 v-for required 规则中的至少一项
我在我的项目中设置了 Vee Validate 3,我正在尝试验证是否在 v-for
循环中检查了特定元素。我在 v-for
中有几个 v-for
,所以我试图找到适合所有这些的东西。
我已经将我的 input
包裹在一个 validation-provider
组件中,该组件存在于我的循环中,但是 required
规则似乎应用于每个元素,我需要只需检查我的 v-model
是否至少检查过一项。
这是我的标记:
<validation-observer v-slot="{ handleSubmit }">
<form @submit.stop.prevent="handleSubmit(submitForm)">
<!-- Step 1 -->
<validation-observer v-if="editor.step == 1" :key="1">
// inputs
</validation-observer>
<!-- Step 2: Choose Sources -->
<validation-observer v-if="editor.step == 2" :key="2">
<ul v-for="(source,table,sourceIndex) in editor.sources" :key="sourceIndex" class="mb-3">
<li>
<!-- Data Source (Table) -->
<validation-provider
name="data source"
:rules="{ required: { allowFalse: false } }"
v-slot="{ errors,classes }"
>
<label :for="'source-'+sourceIndex" class="font-medium text-gray-700 cursor-pointer block p-4 border rounded-md">
<div class="flex">
<div class="flex-1">
<p class="text-xs font-medium text-gray-400">Data Source</p>
<h5 class="text-sm font-bold text-gray-500" :class="source.isChecked ? 'text-indigo-600' : ''">{{ table }}</h5>
</div>
<div v-if="source.isChecked" class="flex-1 items-center flex justify-end" :class="source.isChecked ? 'text-indigo-600' : ''">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="24" width="24" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<input :id="'source-'+sourceIndex" v-model="source.isChecked" type="checkBox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer hidden">
</label>
<span class="text-xs text-red-500">{{ errors[0] }}</span>
</validation-provider>
</li>
</ul>
</validation-observer>
</form>
</validation-observer>
现在,required
规则正在监听我是否检查了循环内的所有元素,我只需要检查是否至少选择了一个,为什么这不起作用?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。