vue mouted 获取dom元素显示null

前端小白记录

已于 2023-07-18 10:56:01 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2023-07-18 10:41:05 首次发布

本文链接：https://blog.csdn.net/m0_50981596/article/details/131781772

版权

在Vue项目中，尝试在mounted钩子中获取DOM元素但遇到null问题，因为元素使用了v-if导致在mounted时未渲染。尝试将v-if改为v-show，或者使用$nextTick在DOM更新后获取元素，但在某些情况下仍无效。最终在updated钩子中成功获取到元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue mouted 获取dom元素显示null

今天做项目时，想对原生的dom进行个操作，发现获取元素显示的是null，查了下资料，我确实在mouted里写的，应该可以拿到啊，然后发现，想要获取的元素使用了v-if控制元素渲染，这就说明在mouted里确实会拿不到，
v-if是条件渲染若为假不渲染，为真才渲染，v-show初始就会渲染，但是相当于display：none，不占位置，相当于css切换
1、把v-if换成了v-show，

 <el-card
              shadow="never"
              v-show="tableCardTitle"
              class="table-wrapper"
              id="tableWrapper"
            >
              <div slot="header" class="clearfix">
                <span>{{ tableCardTitle }}</span>
              </div>
              <el-table :data="tableData" stripe class="table">
                <el-table-column
                  :prop="item.key"
                  :label="item.name"
                  v-for="(item, index) in tableLabel"
                  :key="index"
                >
                </el-table-column>
              </el-table>
            </el-card>```

重新保存发现还是不可以，又试了下在回调里nextTick()
2.nextTick() 等待下一次 DOM 更新刷新的工具方法

 this.$nextTick(() => {
      // this.addHorizontalDrag();
      const tableWrapperEl = document.querySelector(".tableWrapper");
      console.log(tableWrapperEl, "tableWrapperEl");
      const tableEl = document.querySelector(
        ".el-table--scrollable-x .el-table__body-wrapper"
      );
      console.log(tableEl, "tableEl");
    });

3.但是还是拿不到，后面想起了updated（）不仅第一次加载可被调用，每次更新也可以，试了下在这里获取，果然可行

 updated() {
    console.log("被触发");
   
    let element = document.querySelectorAll("button");}