Solution to using getElementsByClassName in vue page cannot get element

1. Problem description

In the vue page, use getElementsByClassName to get the dom. I found that I could never get it. The returned array is empty and has a length of 0.

2. Problem analysis

It is said that this is due to the mechanism of vue. You need to wait until all the content is mounted.

See the specific content for referenceThis article. To use nextTick.

In my impression, nextTick always seems to be used with onMounted. But it is not.

In the following example, nextTick is not placed with onMounted, but is located in an external call to switch method, triggered following the event.

3. Problem resolution

The following code is a component that displays or hides different contents in response to parameters transmitted by external calls, and performs initialization actions.

When initializing, you need to use getElementsByClassName to get the dom.

The initialization method needs to be executed in nextTick() to obtain the dom of the specified class.

<template>
  <div >
    <div v-if="" class="tj-container">Content 1</div>
    <div v-if="" class="tj-container">Content 2</div>
    <div v-if="" class="tj-container">Content 3</div>
  </div>
</template>

<script setup>
const state = reactive({
  targ: "",
  water: false,
  zone: false,
  red: false,
});

const showOrHide = (targ, status) => {
   = targ;
  const t = ();
  if (t === "water")  = status;
  else if (t === "zone")  = status;
  else if (t === "red")  = status;

  nextTick(() => {//nextTick, not necessarily used in onMounted    dragInit();
  });
};
const show = (targ) => {
  showOrHide(targ, true);
};
const hide = (targ) => {
  showOrHide(targ, false);
};
defineExpose({ show, hide });//These two methods can be called externally
function dragInit() {
  const dom = ("tjContainer");
  const els = ("tj-container");
  if ( === 0) {
    ("Not foundclass='tj-container'Elements");
    return;
  }
  const drag = els[0];
  //Go to achieve great things,}
</script>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.