vue2获取不到dom元素

Question

在mounted中拿不到dom元素怎么回事，可能干扰的原因是啥，在查看元素上已经有dom结构了，但就是获取不到，是 null，但是在浏览器控制台能打印出来这个dom

<el-form-item  :label="$t('download.templateContent')" >
                    <div class="question-editor">
                        <div id="editor-container" ref="editorContainer">
                        </div>
                    </div>
                </el-form-item>


mounted() {
    const dom = document.getElementById('editor-container');
    console.log(dom,'找到富文本编辑器了,在mounted中');  打印出来是 null

用下面这个打印是undefined ,
this.$nextTick(()=>{
      // const dom = document.getElementById('editor-container');
      const dom = this.$refs.editorContainer
    console.log(dom,'找到富文本编辑器了,在mounted中');
    })

}

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue2获取不到dom元素

你遇到的问题是，在 Vue2 的 mounted 生命周期中，无法获取到 DOM 元素，这可能是由于 Vue 的渲染机制导致的。

在 Vue2 中，mounted 生命周期是在 DOM 元素被渲染完成后执行的，但是 Vue 的渲染机制是异步的，这意味着在 mounted 生命周期中，DOM 元素可能还没有被完全渲染完成。

因此，在 mounted 生命周期中，获取到 DOM 元素可能会返回 null。

解决方法有以下几种：

1. 使用 nextTick 方法

可以使用 nextTick 方法来确保 DOM 元素已经被渲染完成，然后再获取 DOM 元素。

mounted() {
  this.$nextTick(() => {
    const element = document.getElementById('your-element');
    // ...
  });
}

1. 使用 $refs 对象

可以使用 $refs 对象来获取 DOM 元素。

<template>
  <div ref="your-element">...</div>
</template>

mounted() {
  const element = this.$refs.yourElement;
  // ...
}

1. 使用 setTimeout 方法

可以使用 setTimeout 方法来延迟获取 DOM 元素。

mounted() {
  setTimeout(() => {
    const element = document.getElementById('your-element');
    // ...
  }, 0);
}

这些方法都可以解决你遇到的问题，但是需要根据你的具体情况选择合适的方法。