vue第一次獲取不到元素的解決方法記錄

更新時(shí)間：2021年06月01日 10:45:06 作者：autofelix

Vue.js雖然說是數(shù)據(jù)驅(qū)動(dòng)頁面的，但是有時(shí)候我們也要獲取dom對(duì)象進(jìn)行一些操作。這篇文章主要給大家介紹了關(guān)于vue第一次獲取不到元素的解決方法，需要的朋友可以參考下

前言

vue中第一次獲取不到元素的解決辦法，是否經(jīng)常第一次點(diǎn)擊彈窗按鈕，獲取彈窗中的元素。打開彈窗獲取元素為空，要第二次才能獲取。

一、更新dom后獲取

this.$nextTick(callback)
methods: {
    play() {
        //獲取元素
        console.log($('#video'));
        this.$nextTick(function() {
            //獲取元素
            console.log($('#video'));
        });
    }
}

二、通過定時(shí)器獲取

setTimeOut(fn, 0)
methods:{
    play() {
        //獲取元素
        console.log($('#video'));
        setTimeOut(function(){
            //獲取元素
            console.log($('#video'));
        }, 0);
    }
}

三、通過觸發(fā)事件獲取

@opened
<el-dialog @opened="play"></el-dialog>
 
methods: {
    play() {
        //獲取元素
        console.log($('#video'));
    }
}

總結(jié)

到此這篇關(guān)于vue第一次獲取不到元素解決方法的文章就介紹到這了,更多相關(guān)vue獲取不到元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)頁面自適應(yīng)的常用4種方法
前端頁面自適應(yīng)有很多方法可以實(shí)現(xiàn),本文小編將為大家詳細(xì)介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
如何在 Vite 項(xiàng)目中自動(dòng)為每個(gè) Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實(shí)現(xiàn)自動(dòng)導(dǎo)入base.less,簡(jiǎn)化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧
2024-09-09
Vue.js函數(shù)式組件的全面了解
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實(shí)例化的組件）,這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下
2021-10-10
如何利用Vue+Element做個(gè)小頁面
vue使用element寫東西讓我感覺到了特別的方便,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue+Element做個(gè)小頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Element-UI清空表單及驗(yàn)證不生效的問題解決
本文主要介紹了Element-UI清空表單及驗(yàn)證不生效的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue項(xiàng)目實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法
這篇文章主要給大家分享的是vue項(xiàng)目實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法，vue-router是前端開發(fā)中用來實(shí)現(xiàn)路由頁面跳轉(zhuǎn)的一個(gè)模塊。下面小編將帶來如何在已經(jīng)創(chuàng)建好的vue-router項(xiàng)目基礎(chǔ)下實(shí)現(xiàn)頁面跳轉(zhuǎn),需要的朋友可以參考一下
2021-11-11
vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
使用vue3+ts打開echarts的正確方式
這篇文章主要給大家介紹了關(guān)于使用vue3+ts打開echarts的正確方式,在Vue3中使用ECharts組件可以方便地創(chuàng)建各種數(shù)據(jù)可視化圖表,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
Vue數(shù)據(jù)代理的原理和實(shí)現(xiàn)
數(shù)據(jù)代理是什么？通過一個(gè)對(duì)象代理，對(duì)另一個(gè)對(duì)象中屬性的操作，簡(jiǎn)單就是說：可以通過?對(duì)象b?對(duì)?對(duì)象a?中的屬性進(jìn)行操作，這里我學(xué)到的數(shù)據(jù)代理是用Object.defineProperty這個(gè)方法進(jìn)行操作
2022-11-11
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09