vue element-ui el-date-picker 数据可以更改，但是前端不显示的更改后的数据问题

template:

<el-form-item label="有效时间：" prop="validTime">

                        <el-date-picker v-model="ruleForm.validTime" style="width:60%"  value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

                    </el-form-item>

 

// 由于 validTime 绑定了 ruleFrom 表单，出于某种博主也不知道的原因，导致了 数据可以更改，但是 前端 页面显示不出来的。 (  这里是纯粹的前端问题，和后端没有任何关系。 )

 

原先赋值是这样赋值的： this.ruleForm.validTime = [res.data.coupon.start_time,res.data.coupon.end_time] 

//  数据这样可以改变，但是前端页面显示的数据不会改变， 实际上内部已经发生了变化，可能是 由于是 懒加载的原因，所以导致了数据不会显示出来。

 

更改后的结果赋值是这样的：  this.$set(this.ruleForm,"validTime",[res.data.coupon.start_time,res.data.coupon.end_time])

 

// 采用了 vue 特有的 Vue.set 来强制改变赋值状态，在 vue 中，由于底层实现原理的特性，导致了 vue 不能用 set 和 delete， 所以 vue 推出了 vue.set 和 vue.delete 方法来进行 赋值 和 删除。