首先我們會(huì)想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時(shí)候會(huì)遇到在你執(zhí)行這個(gè)方法的時(shí)候，頁面還并沒有被渲染完成，所以就會(huì)出現(xiàn)這個(gè)方法在匹配頁面標(biāo)簽報(bào)錯(cuò)的情況。
解決思路：
1.通過子頁面調(diào)用父頁面的方法，因?yàn)樵谧禹撁骈_始渲染的時(shí)候，你的父頁面肯定是已經(jīng)渲染好了的，前提這里的方法中是去找尋父頁面的標(biāo)簽。
2.直接在本頁面監(jiān)視一個(gè)參數(shù)，發(fā)現(xiàn)參數(shù)被初始化了，說明頁面也已經(jīng)加載完成，因?yàn)槟愕捻撁嬗玫搅诉@個(gè)參數(shù)。
方法1案例：tab頁里的子頁面如果沒有內(nèi)容就隱藏
父頁面代碼
<el-tabs v-model="initTab" type="card"> <el-tab-pane label="1信息" name="tab1"> 1 </el-tab-pane> <el-tab-pane label="2報(bào)告" 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的代碼，這里主要就是方法調(diào)用，頁面自己搞定
data () { return { list: [] }},mounted () { this.init()},methods: { init() { if (list.length > 0) { this.$emit('whiteShow', 'inline') } else { this.$emit('whiteShow', 'none') } )}list是子頁面的內(nèi)容，這樣如果子頁面沒有內(nèi)容就可以隱藏掉了
方法2案例：我這邊需要tab頁隱藏
<el-tabs v-model="initTab" type="card"> <el-tab-pane label="1信息" name="tab1"> 1 </el-tab-pane> <el-tab-pane label="2報(bào)告" 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 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
隱藏tab的方法我用了原生js，因?yàn)関ue生成后的頁面和寫的vue頁面有所差別，所以我直接用了最笨的方法進(jìn)行匹配。
以上所述是小編給大家介紹的Vue.js 關(guān)于頁面加載完成后執(zhí)行一個(gè)方法的問題詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
