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

Question

我有一个 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>

浏览器控制台中也没有错误。

Answer 1

您不能直接基于其他数据 Prop 定义数据 Prop 。您可以使用以下方法直接定义 Prop 的值:

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

另请注意，您同时绑定(bind)到 v-model 和 :value。我建议仅绑定(bind)到 v-model。