初心者限定！！Vueで横幅（width）の変化を検知する方法

今回は、タイトルにも書いてる通りwindowの横幅の変化を検知したいと思います！！！

長ったらしい話はせずにもうコードを書いていきますね！

まず、初めにdataオブジェクトでcurrentWidthというプロパティを宣言し、横幅が変化するたびに呼び出す関数を設定していきます。

App.vue

<script>
export default {
  data() {
    return {
      currentWidth: window.innerWidth,
    }
  },
  methods: {
    calculateWindowWidth() {
      // 横幅を取得する関数
      this.windowWidth = window.innerWidth
    }
  }
}
</script>

初期値として、window.innerWidthを設定しておきます。

次に、DOM要素と紐づけられた後に行う関数mounted、DOM要素が消去される前の関数beforeDestroyを用いて、横幅の変更を検知します。

App.vue

<script>
export default {
  data() {
    return {
      currentWidth: window.innerWidth,
    }
  },
  mounted() {
    // 横幅の変更を検知
    window.addEventListener('resize', this.calculateWindowWidth)
  },
  beforeDestroy() {
    // 横幅の変更を検知
    window.addEventListener('resize', this.calculateWindowWidth)
  },
  methods: {
    calculateWindowWidth() {
      // 横幅を取得する関数
      this.currentWidth = window.innerWidth
    }
  }
}
</script>

いかがだったでしょうか？

僕は、最初にcomputedで行ってしまい横幅の変更を検知してくれませんでした。

最初はcomputed便利だな～って思ってたんですけど、最近使い方が難しいことに気づきました。

なんとなく出来たので良しとします。

以上、「初心者限定！！Vueで横幅（width）の変化を検知する方法」でした！

良かったら、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading