Vueのref属性使って要素の現在の幅を取得する #JavaScript

ref属性をつかったWidthの取得の個人メモ

現在のWidthを知りたい要素にref属性を追加する


<template>
  <div class="parentWidth" ref="getParentWidth">
    .
    .
    .
  </div>
</template>

mountedプロパティ以降に記述する(DOMが描画されてからでないと取得できないため)


mounted () {
  // 要素の幅を取得するメソッド
  this.getTargetWidth()
  // ユーザーがウィンドウサイズを変更したら実行されるようにする
  window.addEventListener('resize', this.getTargetWidth)
},
methods: {
  getTargetWidth () {
    let targetWidth = this.$refs.getParentWidth.clientWidth
    console.log(targetWidth) // 要素の幅をInt型で取得する事ができる
  }
}