Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@tommy0218

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

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型で取得する事ができる
  }
}
1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?