vue遇到的坑,DatePicker日期限制问题

1,iiview,DatePicker日期限制问题

场景:开始日期小于结束日期.结束日期大于开始日期

因为我是在Modal组件中写了这个内容

效果如下:

<DatePicker type="date" :options="endDate()" v-model.trim="modelData.contractEndTime" 
 @on-change="mccOrder" ></DatePicker>  

<DatePicker type="date" :options="startDate()" v-model.trim="modelData.contractStartTime"  
 @on-change="mccOrder" ></DatePicker>  

    startDate(){
        return {
            disabledDate:date =>{
                let endTime=new Date(this.modelData.contractEndTime).valueOf()
                return date &&date>endTime
            }
        }
      },
      endDate(){
          
          return {
          disabledDate:date =>{
            let starTime=new Date(this.modelData.contractStartTime).valueOf()
            return date &&date<starTime
          }
        }
      },

 

第一次选择并不会限制,点击第二次才会更新视图,

分析原因 图形滞后于数据,于是需要两次点击才能才会出现日期限制

解决方法:在组件on-change事件中进行重新渲染 vm.$forceUpdate()

mccOrder(mcc){
      this.$forceUpdate()
}

总结:在大多数图形滞后于数据的情况下都可以用此方法重新渲染dom

2,vuex报错

 1.xxx  was assigned to but it has no setter

在某些地方对vuex中state直接赋值

用mutations中的方法修改this.$store.commit('setDrawerRight')

用actions中的方法修改this.$store.dispatch('setDrawerRight')

不要使用v-model直接绑定