[v1] web page is not reactive on iOS 12.2 with hidden QDrawer

[martinflorek]

This is a generalization of issue #3716 where it is happening on both iPhones and iPads with iOS 12.2.

Software version

v1.0.0-beta.13

Quasar: v1.0.0-beta.13
@quasar/app (v1+ only):
OS: iOS
Node:
NPM:
Browsers:
iOS: 12.2
Android:
Any other software related to your bug:

JsFiddle

Same JsFiddle as in the #3176.

What did you get as the error?

Vue properties are not reactive e.g. changing data/property via a button click does not update UI depending on that property.

What were you expecting?

UI updates when Vue properties change.

What steps did you take, to get the error?

QApp with a QDrawer which is hidden and can be pulled-out from side - via its breakpoint property. Default QDrawer is hidden on iPads and iPhones because of screen size. Now all the Vue properties are not reactive.

[rstoenescu]

@martinflorek Can you copy paste me the terminal output of "quasar info" please? I just want to make sure you are on latest and greatest, otherwise there was an issue reported in Vue which got fixed.

[martinflorek]

@rstoenescu we use the UMD version (no quasar info) and the Quasar.version returns "1.0.0-beta.14", we upgraded from beta 13 today and it is still happening. Vue version is 2.6.10 and the linked Vue issue is not it. The iOS 12.2 was released a week ago and the JsFiddle example does not use router at all.

[rstoenescu]

This smells a lot like a Vue bug on its umd version regarding watchers.
The model-toggle's watcher on the "value" prop is never triggered. Seems like after changing the leftDrawer in one of the methods you also need to call "this.$forceUpdate()".

Current workarounds, until I fully figure this out, are:

1. Start with "leftDrawer" and "rightDrawer" being set to false.
   or
2. On your button trigger, add a this.$forceUpdate() at its end.

[rstoenescu]

Or 3. In your app's mounted() hook, add this:

mounted: function () {
  setTimeout(() => {
    this.$forceUpdate()
  })
}

[rstoenescu]

@martinflorek

Found a good workaround for Vue.
Will be available in Quasar v1.0.0-beta.18.

Thank you so much for reporting this!

[martinflorek]

thank you. works great!