Question

151

How can I monitor changing window sizes in Vue?

rated 0 times [ 153] [ 2] / answers: 1 / hits: 179074 / 7 Years ago, fri, november 10, 2017, 12:00:00

In my mobile web app with Vue, I want to hide my footer when the soft keyboard pops. So I have a little function to test the ratio of window height to window width...

showFooter(){

    return h / w > 1.2 || h > 560;

}

...and I declare window.innerHeight/window.innerWidth in my data.

    data: { h: window.innerHeight, w: window.innerWidth }

Trouble is, when window.innerHeight changes, my h property doesn't get the new value. How can I watch window.innerHeight ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leslijessalyng

Add To Favorites

Follow

Total Points: 650

Total Questions: 85

Total Answers: 109

Location: Croatia

Member since Mon, Sep 6, 2021

3 Years ago

leslijessalyng questions

1 Vue dist path for CSS and JS not found

Fri, Feb 21, 20, 00:00, 4 Years ago

1 How do I loop through multiple pages in an API?

Tue, Jul 30, 19, 00:00, 5 Years ago

1 ReactJS and autofocus

Fri, Jul 5, 19, 00:00, 5 Years ago

1 How to fix The message port closed before a response was received. after window.location.reload() in javascript

Wed, Apr 3, 19, 00:00, 5 Years ago

1 TypeError: $ .find is not a function

Wed, Mar 13, 19, 00:00, 5 Years ago

View All

answered 7 Years ago terrellhunterm · Accepted Answer

To get the current window height of your browser as it changes, use this script:

new Vue({

  el: '#app',

  data() {

    return {

      windowHeight: window.innerHeight

    }

  },



  mounted() {

    this.$nextTick(() => {

      window.addEventListener('resize', this.onResize);

    })

  },



  beforeDestroy() { 

    window.removeEventListener('resize', this.onResize); 

  },



  methods: {  

    onResize() {

      this.windowHeight = window.innerHeight

    }

  }

});

How to display the information:

<div id="app">

 Current height: {{ windowHeight }}

</div>