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的响应式了

为什么要用$set

由于Object.defineProperty()的限制,新增或删除对象属性以及数组里面里面使用索引更新数据无法拦截，需要通过 Vue.set 及 delete 这样的 API 才能生效

在vue中，并不是任何时候数据都是双向绑定的。
在官方文档中，有这样一段话，如下：

从文档得知，当数据没有被双向绑定的时候，我们就需要使用set了

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

如果使用$set还没有生效的话那可能就是设置的key已经存在于这个对象(form)或数组中的时候，它只会更改data并不会为该key添加响应检测，所以页面上的依赖warehouseOpt的试图就不会更新，解决这个问题的办法就是在设置值之前先把这个属性删除掉，然后再进行this.$set

    selectTime(data) {
      this.$nextTick(() => {
        //先使用$delete对该属性进行删除,才能重新检测到该数据的变化
        this.$delete(this.form, 'time');  
        //生效成功更新数据并更新页面
        this.$set(this.form, 'time', [data[0], data[1]]);  
      });
    },