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

枇杷强
  • 93

在 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>
回复
阅读 355
4 个回答
✓ 已被采纳

试试 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 思否「问答」打卡,欢迎正在阅读的你也加入。

document.getElementById(this.domId)

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

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

宣传栏