Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
最近在使用百度编辑器的时候,发现数据渲染失败。原因是因为在使用uParse('#content',{rootPath:'/static/ueditor'})时候,数据并没有全部渲染。
<template>
<div class="body-bg">
<div class="page-size">
<blog-nav :navList="navList" :tabList="tabList" :leftType="2" />
<div>
<h1>{{row.title}}</h1>
<div id="content" v-html="row.content"></div>
</div>
</div>
</div>
</template>
<script>
import Nav from "@/components/Nav";
export default{
data(){
return {
navList: [
{id: 1,iconfont: '',title: 'Blog'},
{id: 2,iconfont: '',title: 'Music'},
{id: 3,iconfont: '',title: 'interflow'},
{id: 4,iconfont: '',title: 'Me'}
],
tabList: [
{id:1,title:'HTML',bgColor:'#C7CA56'},
{id:2,title:'CSS',bgColor:'#FFD562'},
{id:3,title:'JS',bgColor:'#F9B462'},
{id:4,title:'JQuery',bgColor:'#42BEA7'}
],
row: []
};
},
components: {
"blog-nav": Nav
},
created(){
let id = this.$route.query.id;
this.util.getRowArt(id,this);
},
mounted(){
// setTimeout(() => {
// uParse('#content',{rootPath:'/static/ueditor'});
// }, 3000);
},
watch:{
row: function(){
this.$nextTick(function(){
uParse('#content',{rootPath:'/static/ueditor'});
});
}
},
methods: {}
}
</script>
<style scoped >
.body-bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #E9E2D4;
}
.page-size{
position: relative;
width: 100%;
max-width: 1024px;
margin: 0 auto;
height: 100%;
}
</style>