Vue.jsの$refsがundefinedになってしまう問題

console.log(this.$refs.hoge)

としても、undefinedが返ってしまってくる場合について、ハマったのでまとめておきます。

二つの原因

• createdでthis.$refsの処理をしている
• v-showではなく、v-ifを使っている

createdでthis.$refsの処理をしている

index.vue

<template>
  <div ref="hoge">
    ~
  </div>
</template>
<script>
export default{
  created(){
    const hoge = this.$refs.hoge
    // 何らかの処理
  }
}
</script>

createdではなく、mountedを使うとうまくいきました。
基本的に、createdはDOM処理未完了、mountedはDOM処理完了の状態ですが、refを使う場合は該当のDOMが読み込まれていないといけません。
ページ描写時にrefの処理をするときは、mountedに記載しておいたほうがよさそうです。
createdでもうまくいくことがありましたが、ページの重さによるようです。

v-showではなく、v-ifを使っている

前述したとおりDOMが生成されていないとrefの処理ができませんが、v-ifを使うとDOMがそもそも生成されません。
v-showならば、DOMを生成しつつdisplay:none;にしてくれるので、refの処理が通ります。

通らない例

index.vue

<template>
  <div ref="hoge" v-if="isHogeExist">
    ~
  </div>
  <p v-else>hogeはないよ</p>
  <button @click="isHogeExist = !isHogeExist"></button>
</template>
<script>
export default{
  data(){
    return{
      isHogeExist:false
    }
  }

  mounted(){
    const hoge = this.$refs.hoge
    // 何らかの処理
  }
}
</script>

通る例

index.vue

<template>
  <div ref="hoge" v-show="isHogeExist">
    ~
  </div>
  <p v-show="!isHogeExist">Hogeはないよ</p>
  <button @click="isHogeExist = !isHogeExist"></button>
</template>
<script>
export default{
  data(){
    return{
      isHogeExist:false
    }
  }

  mounted(){
    const hoge = this.$refs.hoge
    // 何らかの処理
  }
}
</script>

以上です。