关于vue中el-date-picker type=daterange日期不回显的问题

原始代码如下:

 
              
            

由于后台返回的数据是两个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方法进行数据的更新,并成功解决此问题
修改后代码如下

 
              
            
    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)
        ]);

你可能感兴趣的:(关于vue中el-date-picker type=daterange日期不回显的问题)