🙌

VuetifyのDOM要素は取得できない

2025/01/28に公開

タイトルままです
以上、解散

環境

  • Vue3
  • Vuetify3
  • Nuxt3

概要

私の理解が正しければ、Vue3ではrefを使用してDOM要素を取得できるはずです。
Vuetifyの提供するコンポーネントについても、動的に変わるサイズを取得したい、などの理由でDOM要素にアクセスしたいことがあります。

でもできません、できない理由は不明です。調べてもよくわかりません。特に記述もありません。
つまり「<v-btn/>」とかの要素を取得したくて「<v-btn ref="btnRef"/>」とかしてもなんか上手く動かないってことです。

こう不明だと私が何か見落としている可能性が大ですが、取り合えずできないものはしょうがないですね。
できる方法を知っている方は教えてください。

取得方法

はい、伝統のjsの方法を使用してください。つまり例えばidを振ったうえで、「document.getElementById("btnRef")」とかしてください。これは普通に動きます。

或いは、例えばサイズが欲しい、とかなら、divで囲んでそいつにrefつければいいですね。

Discussion