【Vue.js】DOMを直接操作する方法！

あきぞらです。

Vue.jsで開発をしていて、DOMの要素を直接いじりたいときがありました。

今回は、その方法について紹介していきます。

「$refs」を使ってDOMの要素を取得

span要素に、ref属性を付けてみます。

<template>
  <div>
    <span ref="test">テスト</span>
  </div>
</template>

testFuncという関数のなかで、

ref属性で設定したtestに「this.$refs.test」として値の取得ができます。

methods: {
  testFunc: function () {
    const testRef = this.$refs.test;
    console.log(testRef); 
    // testと表示させる
  }
},

要素に直接アクセスしたい場合は便利です。