Currently, I am facing an issue with a v-select feature on my website. It contains four items for selecting different dates, with the last item designated for choosing a manual date. My intention is to have a menu or dialog box pop open when this option is selected, displaying a date picker. Unfortunately, I haven't been able to make this functionality work as intended...
<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>
I've experimented with various solutions, but so far none have been successful. If anyone has any insights or suggestions on how to resolve this issue, I would greatly appreciate it! :)