Vue.js

Question

我正在使用 V-Calendar 和 Vue.js 打印显示可用日期的日历。

我的代码：

<v-date-picker
    v-model="date"
    :value="null"
    color="red"
    is-inline
    :available-dates='[
        {start: new Date(2020, 06, 28),end: new Date(2020, 06, 28)},
        {start: new Date(2020, 06, 30),end: new Date(2020, 06, 30)}
    ]'
/>

脚本：

<script>
    var app = new Vue({
        el: "#div",
        data: {
            dates: [],
        },
        watch: {
            result: function () {
                app.result.forEach(function(item, index){
                    let formatedDate = moment(item.date).format('YYYY-MM-DD');
                    if(!app.dates.includes(formatedDate)){
                        app.dates.push(formatedDate)
                    }
                });
            }
        }
    });
</script>

这只允许我 select 这两个日期，但是如何在 javascript 而不是 html 中设置这些值？我想从 API 加载数据，并且此值不应列在 html?

中

来自 API 的回复：[ "2020-09-01", "2020-09-02", "2020-09-03", "2020-09-04", "2020-09-05", "2020-09-06", "2020-09-07" ]

Link 到日历：https://vcalendar.io

Answer 1

尝试映射 API 响应，然后将 dates 属性绑定到 available-dates 道具，例如：

:available-dates='dates'

if(!app.dates.find(date=>new Date(date).getTime()===new Date(formatedDate).getTime())){
  app.dates.push(  {start: new Date(formatedDate),end: new Date(formatedDate)})
}

Vue.js - 如何在 V-Calendar 中只设置可用日期？

Vue.js - How to set only available dates in V-Calendar?

javascript

vcalendar

vue-component

vuejs2