Search code examples
javascriptvue.jsvuejs2vue-componentvuetify.js

Snackbar Vuetify - override method after timeout


I want to ask You how I can define a method which execute after the timeout? After that timeout i want to execute $emit event, but I don't know how can i do this...

<v-snackbar
  v-model="snackbar"
  :color="primary"
  :timeout="5000"
>
  {{ text }}
  <v-btn
    dark
    flat
    @click="snackbar = false"
  >
    Close
  </v-btn>
</v-snackbar>

https://vuetifyjs.com/en/components/snackbars


Solution

  • According to the documentation there's no event attached to that property, but i will give a solution that responds to your use case, add timeout property to your data object as follows :

       data() {
             return {
              snackbar:false,
              timeout:6000,
              ....
             }
        }
    

    add an event handler to your button click :

         <v-btn block
           color="primary" 
           dark
           @click="showSnackbar">
           Show Snackbar
        </v-btn>
    

    in your methods add showSnackbar method

        methods: {
             showSnackbar() {
               this.snackbar=true;
               setTimeout(() => { this.$emit("yourEvent"); },this.timeout);
             }
           }
    

    I simulate a your case in this pen