关于vue中el-date-picker type=datera

原始代码如下：

 <el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">
              <el-date-picker unlink-panels 
                class="bigWidth"
                :disabled="isDisabled"
                v-model.trim="ruleForm.time"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>

由于后台返回的数据是两个yyyy-mm-dd格式的日期(startTime,endTime)，因此一开始采用

         this.ruleForm.time = [
           this.baseDateTemp(res.data.startTime),
           this.baseDateTemp(res.data.endTime)
         ];
         //this.baseDateTemp是全局的转日期为时间戳的方法

结果发现得到的日期可以渲染在el-date-picker上，但是修改的时候不会回显
经测试后发现，此时可以触发input方法，但不触发change方法
在input方法中可知，修改时，el-date-picker所绑定的v-model的值已经改变，但是控件中没有实时更新
最终选择采用this.$set方法进行数据的更新，并成功解决此问题
修改后代码如下

 <el-form-item class="form_bigt_p" label="项目起止时间:" prop="time">
              <el-date-picker unlink-panels 
                class="bigWidth"
                :disabled="isDisabled"
                v-model.trim="ruleForm.time"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @input="testClick"
              ></el-date-picker>
            </el-form-item>

    testClick(e) {
      this.$nextTick(() => {
        this.ruleForm.time = null;
        this.$set(this.ruleForm, "time", [e[0], e[1]]);
      });
    },
    // 将后台获取到的两个日期转为time的方法修改为
        this.$set(self.ruleForm, "time", [
          this.baseDateTemp(res.data.startTime),
          this.baseDateTemp(res.data.endTime)
        ]);