vue页面中使用getElementsByClassName无法获取元素问题

Posted 2023-01-19 左直拳

一、问题描述

在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()