Vue.js Vue Datepicker 不会在渲染时显示默认日期

不能直接基于其他数据props 定义数据props .您可以使用以下命令直接定义props 的值:

<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时不引用其他属性.

或者，您可以使用计算(computed)属性，在我看来，这样做更干净:

<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个.