vue el-date-picker 直接赋值不生效、数据绑定无效

例如:
<el-date-picker v-model="form.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" ></el-date-picker>

当直接给form.expireTime 赋值是 form.expireTime = value , 界面没有变化。但是form.expireTime值已经更新了。

原理:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

this.$set(form, "expireTime", value)

为什么要写出来
直觉告诉我,可以使用$set方法。果然有效。
帮别人解决问题很开心/::D/::D/::D/::D/::D

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容