Computed property with matchMedia function Vue.js

Question

I have some problem with the matchMedia function that I wrote inside my computed property in Vue. The problem is when I load/refresh page, the function does not work. It only back to work after I resize the screen in Responsive Design Mode at the browser.

Here the code of my app.js

     computed: {
        widthChange() {
            if (matchMedia) {
                    var mqT = window.matchMedia(" (max-width: 850px) and (min-width: 600px) ")

                    function changeWidthT(mqT) {
                    const sectionRight = document.querySelector(".section-right")
                    if (mqT.matches) {
                        sectionRight.classList.remove("col-7")
                    }
                    else {
                        sectionRight.classList.add("col-7")
                    }
                }

                mqT.addListener(changeWidthT)
            }
        }
    },

and I call the computed property inside the parent of the page

<div class="frontpage-parent" :class="widthChange">...
</div>

How is matchmedia defined? If it comes from another script, there are quite a chances it is not defined at the time Vue compute the value for the first time. Since Vue caches the results of `computed` properties, it will not be revaluated until one of the observables changes. — BroiSatse, Oct 30 '19 at 13:52
Actually after reading a bit more of what you did here - this code should not live in the computed properties at all. You don't even return anything! — BroiSatse, Oct 30 '19 at 13:56
I placed the function in the component with Vue.extend. I tried to use methods property but still gave me the same result — αякjυηισя K, Oct 30 '19 at 14:08

BroiSatse · Answer 1 · 2019-10-30T14:23:45.993

You are misusing computed properties here. They are supposed to be getters, meaning they are only to return ready to sue values. You're actually attaching event listeners there.

Instead, you need to use data attribute and initialize your listeners within mounted hook:

export default {
  name: 'Blah',
  data () {
    const tabletViewQuery = matchMedia('...')
    return {
      tabletViewQuery: tabletViewQuery.
      tabletView: tableViewQuery.matches,
    }  
  },
  mounted () {
     this.tabletViewQuery.addListener(() => {
       this.tabletView = tableViewQuery.matches
     }
  }
}

and use it in a table:

<div class="section-right" :class="{ 'col-7': tabletView }">

However, probably much cleaner solution would be to use vue-match-media plugin.

thank you for the answer, you great can define something that I never thought before. — αякjυηισя K, Oct 30 '19 at 14:34

Tsepo Nkalai · Accepted Answer · 2019-10-30T14:21:52.700

0

Have you tried calling widthChange() in the mounted hook so that it runs on load?

Edit Try placing const tst = this.widthChange; in the mousnted hook

edited Oct 30 '19 at 14:21

answered Oct 30 '19 at 13:52

Tsepo Nkalai

1,492
11
18

thanks for the answer, but I just dont know how to call the the function inside the mounted hook – αякjυηισя K Oct 30 '19 at 13:57
@αякjυηισяK ah ya, its a computed property. Try this, make it return something and just place const tst = widthChange; in the mounted hook. Or even maybe just place widthChange; – Tsepo Nkalai Oct 30 '19 at 14:01
thank you, but the mounted hook gave me an error saying that the function is not defined – αякjυηισя K Oct 30 '19 at 14:05
Yes, dont call it as a function. Just treat it like a variable – Tsepo Nkalai Oct 30 '19 at 14:06
If you read here you'll see that you define them like functions but you access them like variables. https://vuejs.org/v2/guide/computed.html – Tsepo Nkalai Oct 30 '19 at 14:08
I'm really sorry, since I'm just a newbie I still dont know how to call it as variable. I'm sorry – αякjυηισя K Oct 30 '19 at 14:11
Ok, I understand. I have edited my answer. Check the new edit. – Tsepo Nkalai Oct 30 '19 at 14:12
@αякjυηισяK Ok, I understand. I have edited my answer. Check the new edit. – Tsepo Nkalai Oct 30 '19 at 14:13
it give error saying "ReferenceError: widthChange is not defined". – αякjυηισя K Oct 30 '19 at 14:19
@αякjυηισяK ah yes, sorry, I always do this mistake, its this.widthChange; you need to put the this – Tsepo Nkalai Oct 30 '19 at 14:21
you save me.... I've been stuck in this problem for 2 days and finally TT – αякjυηισя K Oct 30 '19 at 14:32
@αякjυηισяK you are welcome. Now that it works and you have figured out what the problem was, you might want to consider BroiSatse answer in that you are missusing computed properties. The convention is that they are like at varials that are determined automatically or something like that and not to do work in. But since its Javascript it will work anyway – Tsepo Nkalai Oct 30 '19 at 14:38

Datsos · Answer 3 · 2022-06-03T11:18:18.723

`matchMedia` in Vue with reactiveness

The aforementioned answers did not work for me. Improved BroiSatse's answer by replacing the deprecated addListener with change event as mentioned on https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

Vue Options API with Typescript example:

data(): { mediaQuery: MediaQueryList; isTablet: boolean; } {
    const mediaQuery = window.matchMedia('(max-width: 1024px)');

    return {
        mediaQuery,
        isTablet: mediaQuery.matches
    };
},
mounted(): void {
    this.mediaQuery.addEventListener('change', () => {
        this.isTablet = this.mediaQuery.matches;
    });
}

score -1 · Answer 4 · answered Oct 03 '20 at 01:30

A year later, but with a small tweak I made it work in Vuejs for a mobile/desktop purposes:

computed: {
...
...
      widthChange() {
        if (matchMedia) {
          const matchMediaQuery = window.matchMedia(" (max-width: 1024px) ")
          const changeWidthT = (matchMediaQuery) => {
            this.isMobileExperience = matchMediaQuery.matches ? true : false;
          }
          mqT.addListener(changeWidthT)
        }
      }
    },
    mounted() { 
      const awakeResizeListener = this.widthChange;
    },
...
...

With a v-if and v-else evaluating a isMobileExperience data option you are good to go with the resizing.

Hope this can help anyone

Computed property with matchMedia function Vue.js

4 Answers4

matchMedia in Vue with reactiveness

`matchMedia` in Vue with reactiveness