Vuetify: [Bug Report] v-dialog does not render when the v-model's value starts at a true value

Created on 2 Oct 2019  路  3Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.1.0
Last working version: 2.0.19
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Linux x86_64

Steps to reproduce

  1. Edit the codepen of the first v-dialog example on the docs and make it so the the v-model's bound value is "true" by default.
  2. Save and reload the codepen with your change
    BUG: for some reason when the v-model's value is set to true from the start, the dialog does not render...

Expected Behavior

v-model's value can be set to true from the start. This is helpful when globally registering components in Vue that are strictly for Dialog purposes. When a calling component activates the registered dialog component, I expect the dialog's v-model to be true from the start.

Actual Behavior

Dialog never appears.

Reproduction Link

https://codepen.io/nmummau/pen/oNvKYOB?editors=1010

Other comments

As a work around, if set the dialog's v-model value to false to begin with... Then create a sleep() on the created() hook of the dialog component, and once that resolves set the v-model's value to true. Then the component appears!

I rolled back my project to use [email protected] and everything is back to a functional state. I'll wait to upgrade until this bug is fixed.

VDialog bug

Most helpful comment

Temporary fix for this
```
.v-dialog__container {
display: unset;
}

All 3 comments

Temporary fix for this
```
.v-dialog__container {
display: unset;
}

Temporary fix for this

.v-dialog__container {
    display: unset; 
}

This didn't worked for me
is there any way which does not sets v-dialog on close to 'display:none" in v1.5
rather re-renders it so that vue life cycle methods can be used

Temporary fix for this

.v-dialog__container {
    display: unset; 
}

This didn't worked for me
is there any way which does not sets v-dialog on close to 'display:none" in v1.5
rather re-renders it so that vue life cycle methods can be used

This bug is fixed and you do not need my workaround anymore. If you want life cycle events to fire, you must put a v-if on parent element and toggle it accordingly.

Was this page helpful?
0 / 5 - 0 ratings