vueでdomを参照したい

必要なこと

  • 言語ブロックのtemplateの参照したいdomにrefを設定
  • 言語ブロックのscriptでthis.$refsを使う

$elについて

this.$refs.hoge.$elにすることで、Elementを参照していることになる。
this.$refs.hoge.$el.firstElementChildみたいな書き方ができる。

注意

this.$refs.hoge.$elでElementを参照できる場合と、
this.$refs.hogeElementを参照できる場合がある

this.$refs.hogeの場合

tempalte言語ブロックのrefをインラインで書いたdomがカスタムエレメントでない場合

<div ref="foo"></div>
mounted () {
  console.log(this.$refs.foo)
}

this.$refs.hoge.$elの場合

template言語ブロックのrefをインラインで書いたdomがカスタムエレメント(importしたcomponent)?の場合

<my-element ref="foo"></my-element>
mounted () {
  console.log(this.$refs.foo.$el)
},
comopnents: {
  'my-element': myElement
}