Vue.js で リサイズイベントを使ってウィンドウサイズを取得した時のメモ
投稿日：2017年11月01日
お疲れ様です、ナガです。
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
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
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インスタンスにならないため、エラーが発生してしまうとのことです。