elementUi中el-date-picker, :picker-options中取不到this.form中的值
在使用Element UI的<el-date-picker>
组件时,如果你在:picker-options
中需要使用this.form
中的值,但是发现无法取到,可能是因为:picker-options
是一个动态绑定的对象,它在组件初始化时被处理,如果this.form
中的值是在组件初始化之后才被赋值的,那么你可能会遇到取不到值的问题。
解决方法:
- 确保
this.form
中的值在组件初始化时就已经被赋值。 - 如果
this.form
的值是异步获取的,你可以在获取到值后,使用Vue的$set
方法来设置响应式属性,或者重新设置整个this.form
对象来确保Vue的响应式系统能够追踪到这些属性的变化。 - 使用计算属性(computed)或者监听器(watch)来根据
this.form
中的值动态生成:picker-options
需要的对象。
示例代码:
new Vue({
el: '#app',
data: {
form: {
startDate: null,
endDate: null
}
},
computed: {
pickerOptions() {
return {
disabledDate: time => {
if (this.form.startDate) {
return (
time.getTime() <
new Date(this.form.startDate).getTime() - 86400000
);
} else {
return false;
}
}
};
}
},
methods: {
fetchFormData() {
// 假设异步获取数据的函数
axios.get('/api/form-data').then(response => {
this.form = response.data;
});
}
},
mounted() {
this.fetchFormData();
}
});
在这个例子中,我们使用了计算属性pickerOptions
来根据this.form.startDate
的值动态设置disabledDate
。当this.form.startDate
被设置时,计算属性会重新计算,并更新picker-options
。这样,无论this.form
中的值是在组件初始化时就设置好,还是通过异步获取后设置,picker-options
都能正确反映最新的值。
评论已关闭