v-ifの要素のDOMをrefで取ろうとして詰まった話

はじめに

Vue3でDOM要素を取得しようとした際にv-if="false"だったために上手く取得できなかったので備忘録として記事を書きました。

原因と解決

原因

v-ifがfalseの場合は要素がコメントアウトされるため存在しないことになり取得できなかった。

<template>
  <div v-if="false" ref="dom"> // コメントアウトされる
    ...取得したい要素
  </div>
</template>

<script>
import { defineComponent, ref, onMounted} from 'vue'

export default defineComponent({
  setup: () => {
    const dom = ref(null)
    onMounted(() => {
      console.log(dom.value) // null
    })

    return {
      dom
    }
  }
})
</script>

解決

v-showで指定すると要素にstyle="display: none;"を指定するので要素自体は存在するので取得できる。

<template>
  <div v-show="false" ref="dom"> // v-showに変更
    ...取得したい要素
  </div>
</template>

<script>
import { defineComponent, ref, onMounted} from 'vue'

export default defineComponent({
  setup: () => {
    const dom = ref(null)
    onMounted(() => {
      console.log(dom.value) // <div data-v-7ba5bd90="" style="display: none;"> ...取得したい要素 </div>
    })

    return {
      dom
    }
  }
})
</script>

さいごに

最初はなぜだかわけわかんなかったけどdivツールを見てそりゃそうだよなと思いました。