Vue.js で リサイズイベントを使ってウィンドウサイズを取得した時のメモ

投稿日:2017年11月01日

Tags: メモ vue JavaScript

お疲れ様です、ナガです。

windowのイベントハンドリング方法がVue.jsのガイドに載っていなかった(と思う)のでメモ。

jQueryでは .on メソッドがあるのでサクッと出来ますが、Vueにはないので、ネイティブなJSで登録する必要があります。

具体的なコードは下記になります。

html

<div id="app">
  <p>window width: {{ width }}</p>
  <p v-if="width < 769">is SP View</p>
  <p v-else>is PC View</p>
</div>
<!-- lodashは無くても問題ないです -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>;
<script src="resize.js"></script>
1
2
3
4
5
6
7
8
9

JS

// resize.js
new Vue({
  el:"#app",
  data: {
    width: window.innerWidth
  },
  methods: {
    // 無くても良いが lodash の debounce で発火頻度を調整してあげるとエコ
    setWindowWidth: _.debounce(function(){
      // data にリサイズ後のウィンドウ幅を代入
      this.width = window.innerWidth;
    }, 300)
  },
  created: function() {
    // インスタンスを作成した後、イベントリスナに登録
    window.addEventListener('resize', this.setWindowWidth, false);
  },
  beforeDestroy: function () {
    // インスタンスを破棄する前に、イベントリスナから削除
    window.removeEventListener('resize', this.setWindowWidth, false);
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

補足

Vue.js のガイドにも掲載されていますが、インスタンスのプロパティやコールバックでアロー関数は使わない方が良いそうです。 理由としては this が Vueインスタンスにならないため、エラーが発生してしまうとのことです。

  • シェア:

Last Updated: 2019-9-9 21:37:59