あきぞらです。
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と表示させる } },
要素に直接アクセスしたい場合は便利です。