Last-Modified: 2022/06/06

Vue.jsでDOMを直接取得する方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでDOMを直接取得する方法について、簡単に解説していきます。

ルート参照

Vue.jsではDOMの直接操作も可能です。

ルートのDOMを参照する場合には、$elを使います。

<div id="app">
  <span>ほげ</span>
</div>
<script>
var app = new Vue({
  el: '#app',
  mounted: function() {
    console.log(this.$el)
  }
});
</script>

上記のコードで、appというidの要素のDOMが取得しています。

ルート以外の参照

ルート以外の参照も可能です。

その場合は、ref属性と$refsを使うことになります。

<div id="app">
  <span ref="hoge">ほげ</span>
</div>
<script>
var app = new Vue({
  el: '#app',
  mounted: function() {
    console.log(this.$refs.hoge)
  }
});
</script>

上記のように、参照したいHTMLの要素にref属性で名前を付け、Vue.jsで$refs.ref属性の名前でDOMが取得できます。

子コンポーネントの参照

子コンポーネントを参照する場合は方法が少し異なります。

具体的には、$refsで参照した後で、$elを使う必要があります。

<div id="app">
  <child-component ref="childHoge"></child-component>
</div>
<script>
Vue.component('child-component',{
  template: '<span>子ほげ</span>'
});

var app = new Vue({
  el: '#app',
  mounted: function() {
    console.log(this.$refs.childHoge.$el)
  }
});
</script>

上記のコードの例では、child-componentという子コンポーネントのルートのDOMを取得しています。

• facebook
• Tweet
• Read Later