Vue Datepicker не будет отображать дату по умолчанию при рендеринге

У меня есть приложение Vue, которое загружает другой компонент, реализующий поле даты диапазона с помощью vue-datepicker. Я хочу, чтобы при первом рендеринге у него был диапазон по умолчанию за последние 7 дней.

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

Мой код компонента выбора даты:

<template>
    <div>
        <Datepicker
            v-model = "selectedDates"
            type = "range"            
            :value = "[startDate, endDate]"
            @change = "onDateChange"
            range            
            :enable-time-picker = "false"
            format = "MMM dd"
        />
    </div>
</template>

<script>
import Datepicker from "@vuepic/vue-datepicker"

export default {
    components: {
        Datepicker,
    },
    data() {
        return {
            selectedDates: [this.startDate, this.endDate],
            startDate: new Date(new Date().setDate(new Date().getDate() - 7)),
            endDate: new Date(),
        }
    },
    methods: {
        onDateChange() {
            this.$emit("date-change", this.selectedDates)
        },
    },
}
</script>

В консоли браузера тоже нет ошибок.

vue.js datepicker vue-component vuejs3 default-value

28.12.2022 19:28

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

<template>
    <div>
        <Datepicker range
            v-model = "selectedDates"
            @change = "onDateChange"         
            :enable-time-picker = "false"
            format = "MMM dd" />
    </div>
</template>

<script>
    import Datepicker from "@vuepic/vue-datepicker"

    export default {
        components: {
            Datepicker,
        },
        data() {
            return {
                selectedDates: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
            }
        },
        methods: {
            onDateChange() {
                this.$emit("date-change", this.selectedDates)
            },
        },
    }
</script>

Обратите внимание, что теперь мы не ссылаемся на другие свойства при определении selectedDates.

Или вы можете использовать вычисляемые свойства, что, на мой взгляд, чище:

<template>
    <div>
        <Datepicker range
            v-model = "selectedDates"
            @change = "onDateChange"         
            :enable-time-picker = "false"
            format = "MMM dd" />
    </div>
</template>

<script>
    import Datepicker from "@vuepic/vue-datepicker"

    export default {
        components: {
            Datepicker,
        },
        computed: {
            startDate() {
                return new Date(new Date().setDate(new Date().getDate() - 7));
            },
            endDate() {
                return new Date();
            },
            selectedDates() {
                return [this.startDate, this.endDate]
            }
        }
        methods: {
            onDateChange() {
                this.$emit("date-change", this.selectedDates)
            },
        },
    }
</script>

Также обратите внимание, что вы привязываетесь как к v-model, так и к :value. Я бы предложил только привязку к v-model.

Полно и точно. Спасибо.

— 28.12.2022 20:58

28.12.2022 20:39