从 v-select VUE 内部打开日期选择器

Question

我有一个 v-select，有四个项目可以选择不同的日期。选择中的最后一项用于选择手动日期，然后我希望使用日期选择器弹出菜单/对话框。但我无法让它发挥作用......

    <v-select
        v-model="dates"
        :items="items"
        clearable
        hide-details
        :label="$tc('Dates')"
    >
        <v-menu
            v-model="showDatePicker"
            :close-on-content-click="false"
        >
            <template #item="{ item, on, attrs }"
                ><v-list-item v-attrs="attrs" v-on="on">{{ item.text }}</v-list-item>
            </template>
            <v-date-picker v-model="dates" @input="showDatepicker = false" />
        </v-menu>
    </v-select>

我尝试了很多不同的方法，但这是最新的。有谁知道如何解决这个问题吗？ :)

Answer 1

我建议使用 v-select 组件。
通过对所选值进行观察，您可以将 v-if 用作日期选择器，其布尔值在您选择所选值以打开日期选择器时更改为 true。
否则该值将为 false 并且日期选择器将得到 v-if="false"