Nuxt 元素id值设为动态的值，但无法通过这个值来获取该元素，我应该如何做才能通过id值获得该元素？

Question

在 components 中无法取得该元素，在 pages 中可以取得

全部的代码示例 :

https://codesandbox.io/s/craz...

简单的代码示例 :

<template>
  <section>
    <div id="app">
      <h1>{{ message }}</h1>

      <button :id="domId">get my id is {{ domId }}</button>

      <pre>
        {{ consol }}
      </pre>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    var domId = Date.now();
    return {
      message: "Welcome to Nuxt!",
      consol: "",
      domId: domId,
    };
  },
  mounted() {
    console.log(
      `我想获得id值为${this.domId}的元素，但总是获得null，我应该如何做？`    );
    
    // 此处可以输出正常值
    console.log(`this.domId`, this.domId);
        
    // 这里输出 null
    console.log(
      `document.getElementById(${this.domId})`,
      document.getElementById(this.domId)
    );
  },
};
</script>

Answer 1

试试 this.$nextTick , 例 ：

  created() {
    if (!process.browser) return
    this.$nextTick(() => {
      console.log(document.getElementById(this.domId))
    })
  },

或者

  mounted() {
    this.$nextTick(() => {
      console.log(document.getElementById(this.domId))
    })
  }

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

将elemId换成domId就行了。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

document.getElementById(this.domId)

Answer 4

一个你的变量名用错了，另外一个你可以用 refs 注册，然后直接用 refs 来获取 dom 示例。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。