Vuejs：如何实现响应式禁用日期选择器

Question

我是新手。我想根据现有 api 控制日期选择器自动禁用。我使用 vuejs-datepicker 库。我看过文档并设法静态实现它，但在响应式实现时遇到问题。

这是我之前的观点：

<datepicker 
    :disabled-dates="state.disabledDates">
</datepicker>

还有，我以前的 datepicker 静态值，尤其是当天：

data() {
    var year = (new Date()).getFullYear()
    var month = (new Date()).getMonth()
    var dDate = (new Date()).getDate()
    
    var state = {
        disabledDates: {
            to: new Date(year, month, dDate), // Disable all dates up to specific date
            // from: new Date(2020, 0, 26), // Disable all dates after specific date
            days: [0,1], // Disable Saturday's and Sunday's
        }
    }
    return {
        
        state: state,

        day: '',        
    }
},

现在，我的观点是：

<datepicker 
    :disabled-dates="disabledDates">
</datepicker>

控制台输出：

我的脚本：

<script>
data() {
    return {
        day: '',

        year : (new Date()).getFullYear(),
        month : (new Date()).getMonth(),
        dDate : (new Date()).getDate(),
        
    }
},
computed:{
    // reactive
    disabledDates: {
        to: new Date(year, month, dDate), // Disable all dates up to specific date, 2020,8,8
        days: [day], // Disable day, 0,1
    }  
},
watch: {
    'day': function(day){
        console.log('day: '+day)
        return this.day
    },
},
</script>

谢谢。

Answer 1

我很确定您唯一的问题是计算属性的语法错误。它们应该是函数，因为它们需要是运行。它们的依赖关系由 Vue 自动确定，当这些发生变化时，函数是 re-run。所以，试试这个：

data: function() {
  return {
    day: '',
    year: (new Date()).getFullYear(),
    month: (new Date()).getMonth(),
    dDate: (new Date()).getDate()
  };
},
computed: {
  // Here. This should be a function.
  disabledDates: function() {
    return {
      // Make sure to use 'this.' when in a component
      to: new Date(this.year, this.month, this.dDate),
      days: [ this.day ]
    };
  }
},
watch: {
  day: function(day) {
    console.log(`Day: ${day}`);
    return value;
  }
}

Vuejs：如何实现响应式禁用日期选择器

Vuejs: how to implement reactively disable datepicker

vue.js

vuejs2

vue-cli

vue-cli-3