[vue.js]关于使用 element-ui datepicker 控件时修改数据视图无变化的解决方法

问题描述:
在使用element-ui框架中的 datepicker 组件时,
需要自己根据条件手动修改时间范围,
修改组件绑定的value 值从而引起视图的变化
但是当我修改了value 值后,数值发生了变化,视图没有实时更新

使用组件:

    <el-date-picker
      v-model="choosetimerange"
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
    </el-date-picker>

这里我的时间范围使用时间戳的形式展示

于是我的想法是,只要给数组重新赋值即可

错误代码:

this.choosetimerange[0] = starttime
this.choosetimerange[1] = endtime

这样执行后,发现数据发生了变化,但视图仍停留在上一个选择的时间段
查阅了相关资料后得出结论

问题分析:
在官网有这样一段话:

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

也就是说,我们在data中声明或者已经赋值过的对象或者数组（数组中具有对象）时，向对象中添加新的属性，如果更新此属性的值，Vue 不能检测到对象属性的添加或删除,因此不会更新视图。

解决方法:
使用 vue 的$set 方法

语法结构:

修改数组 this.$set( Array, index , value)

修改对象 this.$set(Object,''key'',value)

this.$set(this.choosetimerange, 0, timeStart);
this.$set(this.choosetimerange, 1, timeEnd);

这样就能既修改数据又更新视图了