validation - vee-validate 是否适用于第三方 UI 组件，例如 Primevue？

Question

我正在使用 vee-validate v4.0、vue 的 (v3) 组件以及来自 Primevue 和 Ionic 的 TypeScript 和 UI 组件。对简单输入字段的验证工作正常：

<template> 
...
<Field
  v-slot="{ field }"
  v-model="username"
  :rules="isRequired"
  name="username"
>
  <IonInput
    v-bind="field"
    type="text"
  />
</Field>
<ErrorMessage
  name="username"
  class="error"
/>
...
</template>

<script lang="ts">
...
 methods: {
    isRequired (value: string) {
      if (!value) {
        return 'This field is required'
      }
      return true
    }
  }
...
</script>

将其应用于 Primevue 的Dropdown元素失败：

<Field
  v-slot="{ field }"
  v-model="campaign"
  name="campaign"
  :rules="isRequired"
>
  <Dropdown
    :options="campaigns"
    option-value="id"
    option-label="name"
    placeholder="Choose a campaign"
    v-bind="field"
  />
</Field>
<ErrorMessage
  name="campaign"
  class="error"
/>

验证按预期工作，但打开下拉菜单会导致错误消息：

你知道如何解决这个问题吗？是否有示例 vee-validate 如何处理更复杂的字段，如下拉或多选元素？

标签： validationdropdownvee-validate

Answer 1

您需要添加@update:modelValue="handleChange"到您的下拉列表中：

<Field
  v-slot="{ field, handleChange }"
  v-model="campaign"
  name="campaign"
  :rules="isRequired"
>
  <Dropdown
    :options="campaigns"
    option-value="id"
    option-label="name"
    placeholder="Choose a campaign"
    v-bind="field"
    @update:modelValue="handleChange"
  />
</Field>
<ErrorMessage
  name="campaign"
  class="error"
/>