使用 this.$set 解决视图无法及时更新问题

记录下项目过程中使用element时间日期组件遇到的问题，主要是对象的绑定造成的一系列问题

时间和日期绑定的是一个值value1，但是后台传的有开始时间和截止时间两个值，所以我将value1这个值设置为了数组，并且为了让它实现校验，把该属性设置在了表单里面

之后在编辑该列数据时，进行了如下操作进行数据获取，但这样会导致一个问题，就是修改时间时，不能及时响应，只有点击确定提交后才能修改成功

原因：

1. 首先从后台获取的数据中没有couponDate这个属性，所以导致刚开始给ruleForm赋值的时候，销毁了couponDate（即this.ruleForm.couponDate == null）
2. 之后重新给该属性添加了空数组，让后台获取的开始和截止时间分别赋值给该数组
3. 但受js的限制，vue无法检测到对象属性的添加和删除，所以就没有及时进行响应式的绑定，导致时间没有及时更新出来

解决办法：

1. 使用 this.$set
2. 用法 this.$set(target, key, value)，target为需要添加属性的对象，key是要添加的属性名，value为属性key对应的值。
3. 原理 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

这样就得到了解决，数据变化之后，视图也可以进行及时的更新