Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The value of $mq is not correct on mouted

See original GitHub issue

Issue Description

// main.js
Vue.use(VueMq, { 
  breakpoints: {
    xs: 468,
    sm: 768,
    md: 1080,
    lg: Infinity
  }
})

// App.js
{
  mounted () {
    console.log(this.$mq) // sm, but the viewport size was matched `lg`
  }
}

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:11

Top GitHub Comments

3reactions

do-adamscommented, Jul 26, 2019

Actually, upon further testing I have determined that the value of $mq for me is correct at mounted() time.

However, peeking into the source code a bit, the vue-mq plugin defaults to breakpoint size sm for all of the Vue lifecycle instance hooks up until mounted(), which causes elements that rely on v-if="$mq === 'sm'" to actually be rendered initially before being removed from the DOM.

In my case, setting the defaultBreakpoint for the plugin to lg fixed the issue.

2reactions

supremeocommented, Sep 19, 2019

In my case, setting the defaultBreakpoint for the plugin to lg fixed the issue.

That doesn’t fix the issue. Resize your browser down and reload the page. You’ll see the same issue persist. For the issue to be resolved, defaultBreakpoint would need to be deviceWidth aware and render the appropriate breakpoint at SSR

Top Results From Across the Web

MQ CRTMQM COMMAND FAILS WITH ERROR AMQ7064 ...

The MQ crtmqm command can fail with error message AMQ7064 ("Log path not valid or inaccessible") if the log directory for the queue...

Send to MQ from java always uses default installed mqm ...

Our code runs in weblogic and we MQ 6.0. No matter if I use the default createQueueConnection() or createQueueConnection("myuserid","mypassword") it always ...

Configuring WebSphere MQ with the WebSphere MQ Explorer

CHANNEL1). Create Server Connection Channel window. Second, the WebSphere MQ Client must be installed and configured on the client, which might or might...

Planning the Sun Cluster HA for WebSphere MQ Installation ...

If you do not intend to install multiple instances of WebSphere MQ, then you do not need to mount /var/mqm as a Global...

Document - RP33 for MessageQ V5.0 on OVMS VAX | HPE Support

... MessageQ installation when installed in batch mode 5046 - Correct MQ crashing OpenVMS O/S when kernel multi threading enabled 5047 - Incorrect...