vue mouted 获取dom元素显示null

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");}

你可能感兴趣的:(vue.js,javascript,前端)