皆さんお疲れ様です。
梅雨もあっという間にあけ、もう真夏なのではないのかと思わせるような日が
続いていますね。
本題とは関係ないですが、最近steamのセールでモンスターハンターライズを購入しました。
複数人でするゲームはやっぱり楽しいですね。
久しぶりにゲームをしているので毎日目がすごく痛いです。
さて、本題ですが、
今、自分が行っている案件でvue.jsを触っているのでそのことについて先月に引き続き書きたいと思います。
vue.jsで個別DOMを直接参照する。
先日vue.jsで直接要素のサイズを動的に変更する修正を行ったのですが、javascriptの取得方法では対象の要素は取得できず、
調べたら出てきたのが、$refsです。親戚に$elというのも存在するのですが、今回使用していないので割愛します。
$refsの使い方ですが、
<template>
<div id="component_root">
<div ref="blog1" class="blog-1">ブログ1</div>
<div ref="blog2" class="blog-2">ブログ2</div>
<div ref="blog3" class="blog-3">ブログ3</div>
</div>
</template>
<script>
export default {
mounted() {
const targetElement = this.$refs.blog1
console.log('対象のDOM：', targetElement);
}
}
</script>コンソールには
対象のDOM：<div class="blog-1">「this.$refs.ref属性の値」と書くことで取得することができます。
注意点は必ずmounted以降に記述することです。
でなければDOMが生成されておらず取得することができません。
取得した要素にはjavascriptと同じように
clientHeightだったりtextContentだったり使用できます。
もし、vue.jsで要素を取得したいということがあればぜひ試してみてください。
おしまい。