前几天改了一个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]]);
});
},