记录下项目过程中使用element时间日期组件遇到的问题,主要是对象的绑定造成的一系列问题
时间和日期绑定的是一个值value1,但是后台传的有开始时间和截止时间两个值,所以我将value1这个值设置为了数组,并且为了让它实现校验,把该属性设置在了表单里面
之后在编辑该列数据时,进行了如下操作进行数据获取,但这样会导致一个问题,就是修改时间时,不能及时响应,只有点击确定提交后才能修改成功
原因:
- 首先从后台获取的数据中没有couponDate这个属性,所以导致刚开始给ruleForm赋值的时候,销毁了couponDate(即this.ruleForm.couponDate == null)
- 之后重新给该属性添加了空数组,让后台获取的开始和截止时间分别赋值给该数组
- 但受js的限制,vue无法检测到对象属性的添加和删除,所以就没有及时进行响应式的绑定,导致时间没有及时更新出来
解决办法:
- 使用 this.$set
用法 this.$set(target, key, value)
,target为需要添加属性的对象,key是要添加的属性名,value为属性key对应的值。- 原理 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性
这样就得到了解决,数据变化之后,视图也可以进行及时的更新