微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vee Validate 3 验证 v-for required 规则中的至少一项

如何解决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 举报,一经查实,本站将立刻删除。