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)文章

VUEX?使用?mutations的兩種方式
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個方法，這個方法就是把點擊的index（也就是每個列表的唯一標(biāo)識），傳給state中的當(dāng)前標(biāo)識，需要的朋友可以參考下
2023-01-01
Vue引入路徑正確但一直報錯問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報錯:Already included file name ‘×××‘ differs from file name ‘×××‘ only in casing.具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue打包添加gzip配置項方式
這篇文章主要介紹了vue打包添加gzip配置項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue項目中該如何解決跨域問題
當(dāng)協(xié)議,域名,端口其中某一個不一致的時候,就會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于Vue項目中該如何解決跨域問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
Vue進行大屏開發(fā)的全流程及技術(shù)細(xì)節(jié)詳解
大屏數(shù)據(jù)可視化是指通過大尺寸顯示屏,如指揮中心,監(jiān)控中心,展覽中心等場景,將復(fù)雜的數(shù)據(jù)信息以圖形化方式展示的技術(shù)方案,下面小編就和大家詳細(xì)講講Vue大屏開發(fā)的全流程吧
2026-01-01
vue實現(xiàn)iview表格添加篩選功能的示例代碼
本文主要介紹了vue實現(xiàn)iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue3封裝數(shù)字滾動組件的實現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動組件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-08-08
Vue項目中大文件切片上傳實現(xiàn)秒傳與斷點續(xù)傳的詳細(xì)實現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Vue項目中大文件切片上傳實現(xiàn)秒傳與斷點續(xù)傳的詳細(xì)實現(xiàn)過程, 在開發(fā)中,如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,需要的朋友可以參考下
2023-08-08
詳解vue 中 scoped 樣式作用域的規(guī)則
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-09-09
Vue項目npm run dev啟動失敗的6個常見原因(附解決方案)
Vue 項目啟動是前端開發(fā)的基礎(chǔ)操作,但很多新手（甚至有經(jīng)驗的開發(fā)者）都會遇到npm run dev（或?npm run serve）啟動失敗的問題,下面就來介紹一下失敗的原因及解決方案,感興趣的可以了解一下
2026-01-01