网站图片防盗连怎么做,永州网站建设效果,德阳建设网站,免费flash网站源码带后台下面这种写法会报错#xff1a;找不到expirationDate#xff0c;这是因为涉及到this的指向问题 在普通函数中#xff0c;this 的上下文并不指向 Vue 组件实例#xff0c;而是取决于函数的调用方式或者是否使用了严格模式
el-date-pickerclassdate-icon-common找不到expirationDate这是因为涉及到this的指向问题 在普通函数中this 的上下文并不指向 Vue 组件实例而是取决于函数的调用方式或者是否使用了严格模式
el-date-pickerclassdate-icon-commonv-modelexpireTimetypedatevalue-formatyyyy-MM-dd HH:mm:ssplaceholder选择日期:picker-optionspickerOptions
/el-date-picker
data() {return {expirationDate: 2024-06-30 00:00:00, // 到期时间pickerOptions: {disabledDate(date) {// 禁用过去日期if (date.getTime() Date.now() - 8.64e7) {return true;}// 禁用期限日期之后的日期console.log(打印找不到thisthis)const expirationDateTimestamp new Date(this.expirationDate).getTime();if (date.getTime() expirationDateTimestamp) {return true;}return false;}}}
}✅两种改法 1️⃣使用箭头函数: 箭头函数不会创建自己的 this 上下文而是从定义时的外层作用域继承 this。修改你的 disabledDate 方法为箭头函数可以解决这个问题如下所示
data() {return {expirationDate: 2024-06-30 00:00:00,pickerOptions: {disabledDate: (date) {// 禁用过去日期if (date.getTime() Date.now() - 8.64e7) {return true;}// 获取期限日期的时间戳const expirationDateTimestamp new Date(this.expirationDate).getTime();// 禁用期限日期之后的日期if (date.getTime() expirationDateTimestamp) {return true;}return false;}}};
}2️⃣使用计算属性
data() {return {expirationDate: 2024-06-30 00:00:00};
},
methods: {dateDisabled(date) {// 禁用过去日期if (date.getTime() Date.now() - 8.64e7) {return true;}// 获取期限日期的时间戳const expirationDateTimestamp new Date(this.expirationDate).getTime();// 禁用期限日期之后的日期if (date.getTime() expirationDateTimestamp) {return true;}return false;}
},
computed: {pickerOptions() {return {disabledDate: this.dateDisabled};}
}
