Vue.js：如何实现反应性禁用Datepicker

问题描述

我是新手。我想控制基于现有api自动禁用datepicker。我使用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,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,// disable all dates up to specific date,2020,8,8
        days: [day],// disable day,1
    }  
},watch: {
    'day': function(day){
        console.log('day: '+day)
        return this.day
    },},</script>

谢谢。

解决方法

我很确定您唯一的问题是计算属性的语法错误。它们应该是 function ，因为它们需要运行。它们的依赖关系由Vue自动确定，当这些依赖关系发生变化时，该功能将重新运行。因此，请尝试以下操作：

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