ダークサイドにようこそ!

限界クリエイターのブログ

<nuxt-img>コンポーネントのDOM要素にアクセスする

Nuxt3 環境で <nuxt-img> にイベントリスナーを設定したいケースがあったのでメモ(ChatGPT に聞きました)。なにか間違えてたらコメントにてご指摘ください。

 

答えから。例えばref 属性に「ref='hoge'」と設定している場合は、「this.$refs.hoge.$el」でDOM 要素にアクセスできます。

 

ここで「this.$refs.hoge」は、hoge という名前の ref が設定されたコンポーネントやDOM要素を示します。ただしこれはDOM 要素そのものではなくVue コンポーネントまたは DOM 要素への参照を保持しているので、実際に得られるのはVue コンポーネントインスタンスです。

次に「.$el」はVue.js のコンポーネントにおいて、そのコンポーネントが生成するルートのDOM 要素を指します。このプロパティを使用することで、コンポーネント自体がマウントされたルートの DOM 要素にアクセスできます。

Vue コンポーネントが DOM 要素をラップしているので、上記にようにしてルートのDOM にアクセスできる(その結果イベントリスナーも設定できる)とのことでした。

 

「this.$refs」ってNuxt2の書き方だと思ってたんだけど普通に動きました。<script setup> タグでなく<script> 内だと良いのかな。この辺もよく分かっていないのでどなたか教えてくれると嬉しいです……

 

参考。

stackoverflow.com

 

その他の記事。

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp