vue页面中使用getElementsByClassName无法获取元素的解决

更新时间：2024年03月04日 11:03:54 投稿：jingxian

这篇文章主要介绍了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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VUEX 使用 mutations的两种方式
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下
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项目中该如何解决跨域问题
当协议,域名,端口其中某一个不一致的时候,就会产生跨域问题,下面这篇文章主要给大家介绍了关于Vue项目中该如何解决跨域问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
Vue进行大屏开发的全流程及技术细节详解
大屏数据可视化是指通过大尺寸显示屏,如指挥中心,监控中心,展览中心等场景,将复杂的数据信息以图形化方式展示的技术方案,下面小编就和大家详细讲讲Vue大屏开发的全流程吧
2026-01-01
vue实现iview表格添加筛选功能的示例代码
本文主要介绍了vue实现iview表格添加筛选功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue3封装数字滚动组件的实现示例
本文主要介绍了vue3封装数字滚动组件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-08-08
Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程
这篇文章主要给大家介绍了关于Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程, 在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,需要的朋友可以参考下
2023-08-08
详解vue 中 scoped 样式作用域的规则
这篇文章主要介绍了vue 中 scoped 样式作用域的规则，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
Vue项目npm run dev启动失败的6个常见原因(附解决方案)
Vue 项目启动是前端开发的基础操作,但很多新手（甚至有经验的开发者）都会遇到npm run dev（或 npm run serve）启动失败的问题,下面就来介绍一下失败的原因及解决方案,感兴趣的可以了解一下
2026-01-01