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

【问题标题】：Does vee-validate work with third-party UI components, e.g. of Primevue?vee-validate 是否适用于第三方 UI 组件，例如Primevue 的？
【发布时间】：2021-06-13 19:25:13
【问题描述】：

我正在使用 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 如何处理更复杂的字段，如下拉或多选元素？

【问题讨论】：

标签： validation dropdown vee-validate

【解决方案1】：

这可以通过监听输入/更改事件并在 <Field> 和（在这种特殊情况下为 Primevue 的）<Dropdown> 之间传递数据来解决，如下所示：

<Form v-slot="{ errors }" @submit="saveAndProceed()">
...

  <Field
    v-slot="{ field }"
    v-model="campaign"
    name="campaign"
    value="value"
    :rules="isRequired"
  >
    <Dropdown
      :options="campaigns"
      option-value="id"
      option-label="name"
      placeholder="Choose a campaign"
      :model-value="field.value"
      :class="{ 'p-invalid': errors.campaign }"
      @input="field.onInput.forEach((fn) => fn($event.value))"
      @change="field.onChange.forEach((fn) => fn($event.value))"
    />
    <ErrorMessage
      name="campaign"
      class="error"
    />
  </Field>
...
</Form>

还与以下其他事件（onBlur 等）的参考进行比较：

Vee-validate's Field reference
例如，Primevue's Dropdown events

【讨论】：

【解决方案2】：

您需要将@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"
/>

【讨论】：