iview框架中datepicker根据接口数据修改禁用日期

Question

问题描述

页面内容

一个input框输入编号，一个datepicker框选择时间
根据input框中的编号调用后台接口，接口返回一个日期，如果返回日期为1970-01-01，则今天之前的日期被禁用，否则返回日期前的时间被禁用。

尝试方法

在input框on-blur时调用接口，获取到日期，设置datepicker禁用

存在问题

第一次输入编号时，datepicker禁用设置正常
若直接删除原来编号，再次触发on-blur时，接口获取日期正常但datepicker禁用依然是上一次的结果。

不知道是不是iview存在options的值只能设置一次的bug？

相关代码

html(省略一些无用的class placeholder等)

<Input v-model="searchForm.no" @on-blur="changeDisabled"></Input>

<DatePicker v-model="searchForm.date" type="date" :options="dateCanChoose"></DatePicker>

js

changeDisabled() {
    if (this.searchForm.blNo != "") {
        // 先把原来的日期清空
        this.isDatePickDisabled = true
        let params = {
            refNum: this.searchForm.blNo
        }
        this.$axios.post(后台接口, params,
            (code,result) => {
                if (code == 200) {   
                    let extendTo = result.data.date
                    if (extendTo == '1970-01-01') {
                        // 今天之后的日期可选
                        this.dateCanChoose = {
                            disabledDate: function (date) 
                                return date && date.valueOf() < Date.now() - 86400000
                            }
                        }
                    } else { 
                        // 此天之后的日期可选
                        this.dateCanChoose = {
                            disabledDate: function (date) {
                                let extendDate = new Date(extendTo).getTime()
                                return date && date.valueOf() < extendDate
                            }
                        }
                    }
                }
            }, (err) => {
                console.log(err)
            })
    }
}

Answer 1

我是把options写到computed里面，你可以试试

Answer 2

仔细看看iview官网