Question

105

Computed property reactive to window.innerwidth in VueJS

rated 0 times [ 106] [ 1] / answers: 1 / hits: 16474 / 6 Years ago, wed, may 23, 2018, 12:00:00

Basically, what I need is a computed property that returns true when the window.innerwidth is equal or lower than 768px and false when it's higher than 768px.

What I did:

computed: {

  isMobile() {

    if (window.innerWidth <= 768) {

      return true

    } 

    return false

  }

}

But that computes that property only once, and if I resize the window later, it doesn't react to that change. What can I do?

Answers

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

cristinadomoniquel

Add To Favorites

Follow

Total Points: 320

Total Questions: 94

Total Answers: 94

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

cristinadomoniquel questions

1 find() vs map() in JavaScript

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Get POST request body with express and fetch

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Module parse failed: Unexpected token when using webpack 5

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to reset vuetify's v-input-file

Mon, Aug 17, 20, 00:00, 4 Years ago

1 Jest and ESLint: Expect must have a corresponding matcher call

Fri, Jul 31, 20, 00:00, 4 Years ago

View All

answered 6 Years ago maureen · Accepted Answer

Add an eventlistener to the window like so:

new Vue({

  el: #app,

  data() { return { windowWidth: window.innerWidth } },

  mounted() {

    window.addEventListener('resize', () => {

      this.windowWidth = window.innerWidth

      console.log(this.isMobile)

    })

  },

  computed: {

    isMobile() {

      return this.windowWidth <= 768

    }

  }

})