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

原始代码

<el-form-item label="征集时间" prop="dateRange">
	<el-date-picker
      v-model="baseForm.dateRange"
      type="daterange"
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
	</el-date-picker>
</el-form-item>

由于后台返回的数据是两个 yyyy-MM-dd 格式的日期字符串(startDate, endDate)，因此一开始采用如下写法来回显

getDetail() {
	getActivityDetail({activityId: this.activityId}).then(res => {
		let { data } = res.data
		this.baseForm = JSON.parse(JSON.stringify(data)) || {}
		this.baseForm.dateRange = [data.startDate, date.endDate]
	}
}

问题描述

上述写法日期回显了但是修改日期的时候不会回显

解决方法

在 input 方法中可知，修改时，el-date-picker 所绑定的 v-model 的值已经改变，但是控件中没有实时更新，最终采用 this.$set 方法进行数据的更新，并成功解决此问题

getDetail() {
	getActivityDetail({activityId: this.activityId}).then(res => {
		let { data } = res.data
		this.baseForm = JSON.parse(JSON.stringify(data)) || {}
		this.$set(this.baseForm, 'dateRange', [data.startDate, date.endDate])
	}
}