前端基础学习-element ui日期范围选择框datePicker编辑赋值问题

这里记录一个踩过的小坑
我们做编辑页面的时候有时候需要先赋初值，但是如果直接用等于的方法赋值后，的确赋值成功了，但是无法再对其进行更改，也不会触发change事件

		<el-form-item label="选择日期" prop="date">
            <el-date-picker
              v-model="ruleForm.date"
              :clearable="true"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
            />
          </el-form-item>

直接赋值

解决方法

这里主要用到$set解决
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的，Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

解决代码

this.$set(this.ruleForm, 'date', [timer2, timer1])