el-date-picker 的一些小坑(chang事件不生效以及页面数据不更新)

前几天改了一个bug,bug是说el-date-picker这个时间日期选择器选择的时间不能实时更新

chang方法不生效需要使用input方法 

最开始我尝试在去打印一下他的时间,根据官方文档chang方法是可以获取到他的最新时间的,结果使用chang方法并不生效,最后尝试着使用input方法(只要输入的值变化了就会触发input)

 <el-form-item label="起止日期：" prop="time">
      <el-date-picker
      v-model="form.time"
      type="datetimerange"
      clearable
      range-separator="-"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      @input="selectTime"
     />
  </el-form-item>

修改时间数据不更新需要使用vue响应式$set

input方法生效之后我开始尝试修改(直接覆盖v-model的值)他的日期时间,但是页面上并没有更新,

于是我先打印出来了数据,结果发现数据是更新的,所以数据更新,页面不更新,这里就需要用到vue的响应式了

    selectTime(data) {
      this.$nextTick(() => {
        //不生效
        this.form.form = [data[0], data[1]]; 
        //生效成功更新数据并更新页面
        this.$set(this.form, 'time', [data[0], data[1]]);  
      });
    },