vue el-date-picker 直接赋值时控件失效

梓暮

已于 2023-08-04 11:07:18 修改

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： IT 文章标签： vue.js 前端 elementui

于 2022-07-04 17:36:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45535361/article/details/125604829

IT 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了解决Vue中el-date-picker控件在特定情况下失效的问题。通过使用Vue的$set方法来确保视图更新，避免了直接修改已初始化对象属性导致的界面不刷新情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

前端vue el-date-picker控件无故失效

问题描述

本人是主打后端，新进的公司要求前后端全干，然后又因为前端做得少，所以经常碰到一些奇怪的问题，比如以下操作，是给vue前端 el-date-picker这个时间控件赋值，但是发现，数据是赋值上去了，但是控件失效了，怎么点都没用

if(resData.batchEntity.manage_scene_start_time!=null&&resData.batchEntity.manage_scene_end_time!=null){
                  teacherOpeningTime.push(moment(resData.batchEntity.manage_scene_start_time).format('YYYY-MM-DD HH:MM:ss'));
                  teacherOpeningTime.push(moment(resData.batchEntity.manage_scene_end_time).format('YYYY-MM-DD HH:MM:ss'));
                  resData.teacherOpeningTime = teacherOpeningTime;
                }
                this.formData = resData;

后来疯狂百度，最终在简书找到解决方案，原文链接：https://www.jianshu.com/p/96c822d14d30

解释：
当直接给resData.teacherOpeningTime 赋值 resData.teacherOpeningTime= value ，界面没有变化。但是resData.teacherOpeningTime 值已经更新了。

解决方案：
把 resData.teacherOpeningTime = teacherOpeningTime;
改成 this.$set(resData, "teacherOpeningTime ", teacherOpeningTime ) 即可解决此问题

if(resData.batchEntity.manage_scene_start_time!=null&&resData.batchEntity.manage_scene_end_time!=null){
                  teacherOpeningTime.push(moment(resData.batchEntity.manage_scene_start_time).format('YYYY-MM-DD HH:MM:ss'));
                  teacherOpeningTime.push(moment(resData.batchEntity.manage_scene_end_time).format('YYYY-MM-DD HH:MM:ss'));
                  this.$set(resData, "teacherOpeningTime ", teacherOpeningTime ) 
                }
                this.formData = resData;

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