WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

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

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

SPONSOR

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

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>

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);
  }
})

補足

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

SPONSOR

この記事をシェアする

コメント

関連記事