Vuetify, closing Snackbar without closing dialog

Question

I am trying to combine the use of a dialog and a snackbar with VueJS. The problem is the following:

Expected Behaviour:

I should be able to close the snackbar without closing the dialog

What happens now:

The dialog is being closed when the snackbar is clicked

---

Here is a JSFiddle to reproduce: https://jsfiddle.net/q6m2j4ae/5/

Here is the markup for the problem:

<v-container>
    <v-dialog v-model="displayDialog" max-width="300px">
        <v-card flat>
            This is the dialog content
        </v-card>
    </v-dialog>
    <v-snackbar
            v-model="displaySnackbar"
            :top="true"
            :right="true"
            :vertical="true"
            color="success"
    >
        Some Content
        <v-btn flat @click.stop="displaySnackbar = false">Close</v-btn>
    </v-snackbar>
</v-container>

As you can see, the v-snackbar is at the same level of the dialog. I am not allowed to nest the snackbar into the dialog. But even if I try the snackbar is not even displayed.

What I tried:

• I thought that the stop modifier on the click event @click.stop="displaySnackbar = false" would be enough to not close the dialog.
• I checked the z-index applied to the elements. The snackbar has a z-index: 1000 and the dialog has a z-index:200. So I'm not able to adjust that value.

Is it a bug? How could I solve the problem on my hand?

Answer 1

A workaround (if the "dismiss on clicking outside the dialog" function is not needed) is to add the property persistent to the dialog.

The click outside the dialog (when clicking the close in the snackbar) is the reason your dialog gets dismissed

Answer 2

For anyone still looking for a good solution: add <div class="v-menu__content--active" style="display:none; z-index:1000;"></div> as a child of your v-snackbar. This tricks v-dialog to think it was not the active component when click outside happened and prevents closing.

Answer 3

I had the same problem. I have produced a solution :

https://codepen.io/alignnc/pen/OdWvJd

<template>
    <div id="app">
        <v-app id="inspire">
            <v-layout row justify-center>
                <v-btn
                    color="primary"
                    dark 
                    @click.native.stop="dialog = true">
                    Open Dialog
                </v-btn>
                <!-- dialog -->
                <v-dialog 
                    v-model="dialog" 
                    max-width="290" 
                    :transition="false"
                    :persistent="snack">               
                    <v-card>          
                        <v-card-text>
                            Click "agree" to set <br>
                            this.dialog to false,<br>
                            and this.snack to true
                        </v-card-text>
                        <v-btn
                            @click.prevent ="snack = true">
                            Agree
                        </v-btn>          
                    </v-card>        
                </v-dialog>      
                <v-snackbar
                    v-model='snack'
                    color='error'
                    :top='true'>
                    Hello
                    <v-btn
                        color="accent"
                        flat
                        @click="snack = false">
                        Close
                    </v-btn>
                </v-snackbar>
            </v-layout>
        </v-app>
    </div>
</template>


<script>
    new Vue({
      el: '#app',
      data () {
        return {
          dialog: false,
          snack: false
        }
      }
    })
</script>