Vue.js vuetify中带有验证程序的日期选择器

我需要创建一个新组件，它只有一个带有验证器的日期选择器。这个组件是通用的，因为我需要在更多的组件中轻松使用。我需要它，当你点击日期选择器，而你没有选择任何日期时，显示一个红色的验证，如下所示：

然后：

如果选择任何日期，此验证将消失

我曾这样想：

<ValidationObserver v-slot="{ handleSubmit, invalid }" ref="form">
<v-form @submit.prevent="handleSubmit(submit)">

    <ValidationProvider ref="form" :name="nombre" :rules="rules" v-slot="{ errors }">
        <v-menu v-model="dialogOpen" :close-on-content-click="false" :nudge-right="40" transition="scale-transition"
            offset-y min-width="auto">
            <template v-slot:activator="{ on, attrs }">
                <v-text-field :error-messages="errors" v-model="value" :label="label" prepend-icon="mdi-calendar" v-bind="attrs" v-on="on">
                </v-text-field>
            </template>
            <v-date-picker required v-model="value" @input="dialogOpen = false" @change="changed"
                @keydown="checkValidate"></v-date-picker>
        </v-menu>
    </ValidationProvider>

</v-form>

但这不起作用。有人可以和我分享另一个例子或解决方案吗

---

谢谢

问题在于vee validate（v3）使用

v-model

查找输入标记，并且由于

vuetify

使用

v-model

将各种组件组合在一起，如日期选择器，vee validate将验证

菜单而不是
v-text-field

有一种解决方法，您需要将Vuetify的选取器片段包装到一个新组件
DatePicker.vue



请注意，您仍然需要通过在值更改时发出
input
事件来实现对该新组件的
v-model
支持

然后将自定义的
日期选择器
与
验证提供程序
一起使用：



当然，这对vee validate来说是一个短视，Vue 3的新
v4
版本避免了这种糟糕的设计