Похоже, что щелчок рядом с контентом в средстве выбора даты Vuetify 2.3.4 "неисправен" - PullRequest
Новая
       74

Похоже, что щелчок рядом с контентом в средстве выбора даты Vuetify 2.3.4 "неисправен"

0 голосов
/ 11 июля 2020

Я новичок в Vuetify и Vue. js. Я не уверен, как и почему что-то не работает должным образом, когда мои 2 средства выбора даты закрываются, когда я выбираю дату. Кроме того, я взял этот код из онлайн-документации / api по адресу: https://vuetifyjs.com/en/components/date-pickers/

Это с закрытием календаря после того, как я выберу значение.

Согласно документации , close-on-content-click должно быть установлено в «true», если вы хотите, чтобы календарь закрывался после того, как пользователь выбрал значение.

В онлайн-образце есть close-on-content- click = "false", а календарь закрывается после выбора? Почему и как?

На разрабатываемой странице у меня есть два выбора даты. Оба они установлены close-on-content-click = "false". Один из них закрывается после выбора, другой - нет.

Почему онлайн-образец закрывается, а не должен? И почему половина моего кода ведет себя неправильно? Я смущен. Я что-то упустил?

Соответствующий код ниже. 

<v-row>
    <v-col md6>
        <v-menu
                v-model="WhenStartedDate"
                :close-on-content-click="false"
                :nudge-right="40"
                transition="scale-transition"
                offset-y
                min-width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="newEvent.whenStartedDate"
                        label="Event Start Date"
                        prepend-icon="event"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                ></v-text-field>
            </template>
            <v-date-picker v-model="newEvent.whenStartedDate" @input="WhenStarteDate = false"></v-date-picker>
        </v-menu>
    </v-col>
    <v-col md6>
    </v-col>
</v-row>
<v-row>
    <v-col md6>
        <v-menu
                v-model="WhenEndedDate"
                :close-on-content-click="false"
                :nudge-right="40"
                transition="scale-transition"
                offset-y
                min-width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="newEvent.whenEndedDate"
                        label="Event End Date"
                        prepend-icon="event"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                ></v-text-field>
            </template>
            <v-date-picker v-model="newEvent.whenEndedDate" @input="WhenEndedDate = false"></v-date-picker>
        </v-menu>
    </v-col>
    <v-col md6>
    </v-col>
</v-row>

1 Ответ

1 голос
/ 11 июля 2020

Одно из ваших меню работает правильно, потому что у вас есть опечатка в одной из переменных, указанных в нем. Другой не ведет себя должным образом, потому что у него правильное имя переменной, и он делает именно то, что вы ему говорите, а именно закрывает меню.

Значение, которое вы передаете в v-model, действует как открытое / закрытое состояние и потенциально может заменить close-on-content-click. К каждому меню прикреплены два v-model: один с именем WhenStartedDate и один WhenEndedDate. Вы устанавливаете их на false в каждом из событий @input в двух компонентах datepicker, и это приведет к принудительному закрытию двух меню ... но не совсем, так как в одном из них есть опечатка: @input="WhenStarteDate = false" отсутствует буква "d". Вот почему один не закрывается, а другой закрывается.

Чтобы оба меню оставались открытыми после выбора даты, просто удалите два @input="..." обработчика из двух v-date-picker s .

Пример в кодировке: https://codepen.io/mlillie87/pen/ZEQRamL?editors=1010

...