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

项目场景：

前端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()方法，既可以新增属性,又可以触发视图更新。