博客

回显时，el-date-picker 所绑定的 v-model 的值已经改变，但是控件中没有实时更新

在@input中采用 this.$set 方法进行数据的更新

<el-date-picker
    v-model="baseForm.liveTime"
    type="daterange"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    @input="timeDetailClick">
</el-date-picker>


data(){
    return {
        baseForm: {
            liveTime: [],
        },
    }
}

methods: {
    // datarange回显
    timeDetailClick(e){
        this.$nextTick(() => {
            this.baseForm.liveTime = ['',''];
            this.$set(this.baseForm, "liveTime", [e[0], e[1]]);
        });
    },
    
    // 在接口回显方法中
    detail(){
        preachInfo.detailAirTalk(this.id).then(res=>{
            if(res.code == 0){
                this.$set(this.baseForm, "liveTime", [
                    moment.unix(res.data.startTime/1000).format("YYYY-MM-DD"),
                    moment.unix(res.data.endTime/1000).format("YYYY-MM-DD")
                ]);
            }
        })
    }
}