记录一下用vue和element ui经常遇到的渲染问题
有时在页面初始化好组件后,修改了值保存需要再次打开组件,发现页面并没有重新渲染。这和vue的渲染机制有关, Vue中的nextTick涉及到Vue中DOM的异步更新。
需要在每次渲染前将组件置为false,等到$nextTick方法后置为true显示。注意nextTick放在回调函数中
<tinymce
v-if="showIntroduction"
v-model="introduction"
:height="300"
:width="800"
/>
this.showIntroduction = false;
let that = this;
if(row){//编辑
that.courseId=row.courseId;
that.title = "编辑课程";
myApi.getCourseDomainByKey(row.courseId).then(function(res){
that.editCourseForm = res;
that.introduction = res.introduction;
that.$nextTick(()=>{
that.showIntroduction = true;
})
that.dialogFormVisible=true;
});