我有一个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>
浏览器控制台中也没有错误。
1条答案
按热度按时间cbjzeqam1#
您不能直接基于其他数据属性定义数据属性。您可以使用以下命令直接定义属性的值:
请注意,我们现在在定义
selectedDates
时不引用其他属性。或者您可以使用计算属性,在我看来这更简洁:
还要注意的是,您同时绑定到
v-model
和:value
。我建议只绑定到v-model
。