Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
  computed: {
    isMobile() {
      return this.windowWidth <= 768
                i also setted the value of the variable on mounted apart of adding the eventListener, so at the start windowWidth is not zero and the computed returns an incorrect value.
– Carlos Pisarello
                May 23, 2018 at 14:43
                You'll need to assign this.windowWidth = window.innerWidth inside of the mounted function (before the event listener) to avoid the 'window is undefined' error
– keyboard-warrior
                Sep 29, 2021 at 13:08
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.