html - 如何在 VeeValidate 的 ValidationProvider 中有两个 v-model 指令？

Question

我想使用 Vue 版本 2 和 VeeValidate 创建一个自定义日期选择器组件。我从那里使用 vuetify 和 v-menu 组件：https ://vuetifyjs.com/en/components/menus/ 。问题是ValidationProvider负责验证字段的字段只接​​受其中一个v-model，而我有两个：一个用于触发v-menu，第二个用于将值收集到v-text-fieldfrom v-date-picker。当我从 v-menu 验证中删除此 v-model 时，但在日期选择器中选择了一些值后我无法关闭菜单。

<ValidationProvider v-slot="{ validate, errors }">
  <label>...</label>
  <v-menu v-model="menu">
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-bind="attrs"
        :value="formatDate"
        readonly
        v-on="on"
        @input="$emit('input', $event) || validate($event)"
      />
    </template>
    <v-date-picker
      :value="value"
      no-title
      @input="$emit('input', $event) || validate($event)"
      @change="menu = false"
    />
  </v-menu>
  <span
    v-if="errors.length > 0"
  >{{ errors[0] }}</span>
</ValidationProvider>

标签： htmlvue.jsvee-validate