vue页面中使用getElementsByClassName无法获取元素问题
Posted 左直拳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue页面中使用getElementsByClassName无法获取元素问题相关的知识,希望对你有一定的参考价值。
一、问题描述
在vue页面中,使用getElementsByClassName获取dom,发觉总是获取不到,返回的数组,空空如也,长度为0。
二、问题分析
据说这是由于vue的机制造成的。 需要等所有内容都挂载完毕才行。具体内容可见参看文章一。要使用nextTick。
我印象中,nextTick好像总是与onMounted一起使用。但其实不是。以下例子中,nextTick就没有跟onMounted放在一起,而是位于外部调用的开关方法,跟随事件而触发。
三、问题解决
以下代码,是一个组件,响应外部调用传过来的参数,展示或隐藏不同的内容,并且执行初始化动作。初始化时,需要使用getElementsByClassName获取dom。初始化方法需要放在nextTick()里执行,才能获取指定class的dom。
<template>
<div id="tjContainer">
<div v-if="state.water" class="tj-container">内容一</div>
<div v-if="state.zone" class="tj-container">内容二</div>
<div v-if="state.red" class="tj-container">内容三</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 );//外部可以调用这两个方法
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>
参考文章
Vue 无法读取HTMLCollection列表的length解决
Document.getElementsByClassName()
以上是关于vue页面中使用getElementsByClassName无法获取元素问题的主要内容,如果未能解决你的问题,请参考以下文章