Vuejs 2 - Event Listener

Windows resize event listener

by javad ebrahimi

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.'
		}
	},
	
	mounted() {
		tthis.$nextTick(function() {
				window.addEventListener('resize', this.getWindowWidth());
				window.addEventListener('resize', this.getWindowHeight());
		})
	},
	
	computed: {
		windowHeight() {
				return this.getWindowHeight();
		},
		windowWidth() {
				return this.getWindowWidth();
		}
	},
	
	methods: {
		getWindowWidth(event) {
				console.log('here')
				return document.documentElement.clientWidth;
		},
		
		getWindowHeight(event) {
				return document.documentElement.clientHeight;
		}
	}
});