vue頁面中使用getElementsByClassName無法獲取元素的解決
更新時間：2024年03月04日 11:03:54 投稿：jingxian
這篇文章主要介紹了vue頁面中使用getElementsByClassName無法獲取元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、問題描述
在vue頁面中，使用getElementsByClassName獲取dom，發(fā)覺總是獲取不到，返回的數(shù)組，空空如也，長度為0。
二、問題分析
據(jù)說這是由于vue的機制造成的。 需要等所有內(nèi)容都掛載完畢才行。
具體內(nèi)容可見參看這篇文章。要使用nextTick。
我印象中，nextTick好像總是與onMounted一起使用。但其實不是。
以下例子中，nextTick就沒有跟onMounted放在一起，而是位于外部調(diào)用的開關(guān)方法，跟隨事件而觸發(fā)。
三、問題解決
以下代碼，是一個組件，響應(yīng)外部調(diào)用傳過來的參數(shù)，展示或隱藏不同的內(nèi)容，并且執(zhí)行初始化動作。
初始化時，需要使用getElementsByClassName獲取dom。
初始化方法需要放在nextTick()里執(zhí)行，才能獲取指定class的dom。
<template>
<div id="tjContainer">
<div v-if="state.water" class="tj-container">內(nèi)容一</div>
<div v-if="state.zone" class="tj-container">內(nèi)容二</div>
<div v-if="state.red" class="tj-container">內(nèi)容三</div>
</div>
</template>
<script setup>
const state = reactive({
targ: "",
water: false,
zone: false,
red: false,
});
const showOrHide = (targ, status) => {
state.targ = targ;
const t = targ.toLowerCase();
if (t === "water") state.water = status;
else if (t === "zone") state.zone = status;
else if (t === "red") state.red = status;
nextTick(() => {//nextTick，不一定要用在onMounted里
dragInit();
});
};
const show = (targ) => {
showOrHide(targ, true);
};
const hide = (targ) => {
showOrHide(targ, false);
};
defineExpose({ show, hide });//外部可以調(diào)用這兩個方法
function dragInit() {
const dom = document.getElementById("tjContainer");
const els = dom.getElementsByClassName("tj-container");
if (els.length === 0) {
console.log("找不到class='tj-container'的元素");
return;
}
const drag = els[0];
//大展宏圖，吧啦吧啦吧啦
}
</script>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目設(shè)置可以局域網(wǎng)訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了關(guān)于VUE實現(xiàn)自動滾動的相關(guān)資料,現(xiàn)在很多數(shù)據(jù)展示大屏都會有很多的自動滾動的列表,文中通過代碼實例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue安裝less-loader依賴失敗問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue引用vee-validate插件表單驗證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解Vue項目中出現(xiàn)Loading chunk {n} failed問題的解決方法
這篇文章主要介紹了詳解Vue項目中出現(xiàn)Loading chunk {n} failed問題的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue element-UI el-select循環(huán)選中的問題
這篇文章主要介紹了Vue element-UI el-select循環(huán)選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3?跨域配置devServer的參數(shù)和設(shè)置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在vue的實際開發(fā)過程中,我們?nèi)绾螌⒁赃x中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關(guān)于Vue3實現(xiàn)下拉選擇框多選功能的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue2如何獲取上頁的url地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 使用計時器實現(xiàn)跑馬燈效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07