Snackbar Vuetify - override method after timeout

Question

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

Answer 1

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

Answer 2

You could also use a watcher. Watch for snackbar === false, then execute the function.