vue-element 时间插件实现范围禁选

Question

1、我想处理时间范围插件，当我的年份确定下来后，我的时间范围只能再年份内选择，我使用了element的时间范围插件，但是我去拿表单数据，却提取不了，form中的数据，我试了写死数据是可以，但是动态的就是不行
2、

html 部分

<el-form-item label="年份" prop="nf">

<el-date-picker v-model="form.nf" :picker-options="pickerOptions1" type="year" placeholder="选择年份" format="yyyy"
    value-format="yyyy" @change="startChange"></el-date-picker>

</el-form-item>
<el-form-item label="疗休养时间" prop="times">

<el-date-picker v-model="form.times" type="datetimerange" :picker-options="pickerOptions"
    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
    value-format="yyyy-MM-dd" align="right">
</el-date-picker>

</el-form-item>

3、数据

data(){
    return{
        form:{
            nf: new Date().getFullYear().toString(),
            title: "",
            beizhu: "",
            sf: null,
            bt: null,
            times: [],
            start_time: "",
            end_time: ""
        },
        pickerOptions: {
            disabledDate(time) {
                console.log(this.form)
                return (
                    Date.parse(this.form.nf+'/01/01') > time.getTime() ||
                    Date.parse(this.form.nf+'/12/31') < time.getTime()
                );
            }
        },
    }
}

现在就是我再打印this.form的时候报错，Cannot read property 'form' of undefined，求解？

Answer 1

pickerOptions放computed里面

computed: {
        pickerOptions(){
        let _this = this
          return {
            disabledDate(time) {
                return (
                    Date.parse(_this.form.nf+'/01/01') > time.getTime() ||
                    Date.parse(_this.form.nf+'/12/31') < time.getTime()
                )
            }
        }
      }
    }

Answer 2

this指向存在问题，这里的this指向的是pickerOptions

pickerOptions: {
  disabledDate: function (time) {
    console.log(this.form)
    return (
      Date.parse(this.form.nf + '/01/01') > time.getTime() ||
      Date.parse(this.form.nf + '/12/31') < time.getTime()
    )
  }.bind(this)
}