Vuejs 2 - Event Listener

Windows resize event listener

by Sillvva

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
	<h1>{{ msg }}</h1>
	
	Window width: {{ windowWidth }}<br>
	Window height: {{ windowHeight }}
</div>

JavaScript

var app = new Vue({
	el: '#app',
	data: function() {
            return {
                msg: 'Hello World! This is a Event listener test.',
                windowWidth:window.innerWidth,
                windowHeight:window.innerHeight
            }
        },
        created: function(){
            window.addEventListener("resize", ()=>{
                this.windowWidth = window.innerWidth;
                this.windowHeight = window.innerHeight;
	    });
        }
});