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>

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./en/ponents/snackbars

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

3 Answers 3

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

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

The best way to execute something after the timeout is to use the native events provided from the v-snackbar ponent. In Vuetify 2 it is @input whether in Vuetify3 is @update:modelValue. Here is an example:

<template>
    <v-snackbar v-model="message.status" :color="message.type" :bottom="true" :right="true" :timeout="timeout" @input="hide()">
        {{ message.text }}

        <template v-slot:action="{ attrs }">
            <v-btn class="mr-0" v-bind="attrs" text icon @click="hide">
                <v-icon color="white">mdi-close</v-icon>
            </v-btn>
        </template>
    </v-snackbar>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'Message',
        data() {
            return {
                timeout: 6000
            }
        },
        puted: {
            ...mapGetters(['message'])
        },
        methods: {
            hide() {
                this.$store.mit('hideMessage')
            }
        }
    }
</script>

So, here the hide() method will be executed when click close button or when it is timed out.