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无法获取元素问题的主要内容,如果未能解决你的问题,请参考以下文章

vue的h5页面中使用视频播放插件

如何在vue的web页面中像小程序中使用rpx单位做兼容

vue实现不刷新整个页面刷新数据

解决vue页面DOM操作不生效的问题

在静态页面中使用 Vue.js

vue进入页面两秒后转盘转动