在Vue开发中，mounted或created钩子执行时页面可能尚未渲染完成，导致查找标签报错。本文介绍两种解决方案：一是通过子组件向父组件发射事件，利用父页面已渲染完成的特性进行操作；二是使用$nextTick监听参数初始化，确保DOM更新后再执行逻辑。结合Element UI Tab组件实例，详细解析代码实现与注意事项。
Vue 页面渲染后执行方法的问题背景
通常开发者会尝试在 mounted 或 created 生命周期钩子中调用所需方法，但有时会发现此时页面 DOM 尚未完全渲染，导致在匹配页面标签时出现报错。
两种解决思路概述
针对上述问题，主要有两种解决思路：
第一种方法是利用子页面调用父页面的方法。由于子页面开始渲染时，父页面必然已经渲染完成，因此如果方法的操作目标是父页面的标签，这种方式可行。
第二种方法是直接在本页面监视一个参数。当检测到该参数被初始化时，说明页面已经加载完成，前提是该页面逻辑依赖此参数。
方法一：子页面调用父页面方法
以下是方法一的具体案例：在 Tab 页的子页面中，如果子页面没有内容，则将其隐藏。
首先查看父页面的代码实现。
<el-tabs v-model="initTab" type="card">
<el-tab-pane label="1信息" name="tab1">
1
</el-tab-pane>
<el-tab-pane label="2报告" name="tab2">
2
</el-tab-pane>
<el-tab-pane label="3信息" name="tab3">
3
</el-tab-pane>
<el-tab-pane label="4信息" name="tab4">
<ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
</ziyemian-group>
</el-tab-pane>
<el-tab-pane label="5信息" name="tab5">
5
</el-tab-pane>
<el-tab-pane label="其它信息" name="tab6">
6
</el-tab-pane>
</el-tabs>
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {}，
initTab：‘tab1'
}
}
methods: {
tabShow: (data) => {
document.getElementsByClassName('el-tabs__item').item(4).style.display = data
},
}接着是 ZiyemianGroup.vue 的代码，该组件主要负责方法调用，页面逻辑由父组件处理。
data () {
return {
list: []
}
},
mounted () {
this.init()
},
methods: {
init() {
if (list.length > 0) {
this.$emit('whiteShow', 'inline')
} else {
this.$emit('whiteShow', 'none')
}
)
}通过 list 数组判断子页面的内容。若子页面没有内容，即可将其隐藏。
方法二：使用 nextTick 监听参数初始化
以下是方法二的案例：需要在 Tab 页中实现隐藏特定 Tab 的功能。
<el-tabs v-model="initTab" type="card">
<el-tab-pane label="1信息" name="tab1">
1
</el-tab-pane>
<el-tab-pane label="2报告" name="tab2">
2
</el-tab-pane>
<el-tab-pane label="3信息" name="tab3">
3
</el-tab-pane>
<el-tab-pane label="4信息" name="tab4">
<ziyemian-group title="4信息" v-if="detailInfo">
</ziyemian-group>
</el-tab-pane>
<el-tab-pane label="5信息" name="tab5">
5
</el-tab-pane>
<el-tab-pane label="其它信息" name="tab6">
6
</el-tab-pane>
</el-tabs>
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
ZiyemianGroup
},
data () {
return {
detailInfo: {}，
initTab：‘tab1'
}
}
watch: {
detailInfo: function () {
this.$nextTick(function () {
this.tabShow()
})
}
},
methods: {
tabShow () {
document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
}
}这里使用了 nextTick 方法，其作用是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据后立即使用此方法，可以获取更新后的 DOM。
隐藏 Tab 的逻辑使用了原生 JavaScript，因为 Vue 渲染后的页面结构与编写的 Vue 模板存在差异，因此采用直接匹配的方式进行处理。
以上介绍了 Vue.js 中页面加载完成后执行方法的两种解决方案，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！