I am looking for a solution to reset snackbar timeout in vuetify.
For example I open snackbar when I have response from api while logging in:
if (data.status == "success") {
this.$router.push({ name: "dashboard" });
this.$store.commit("snackbar/open", {
color: "success",
text: data.message
});
} else {
this.$store.commit("snackbar/open", {
color: "error",
text: data.message
});
this.apiErrors = data.errors;
}
My point is that I first log in with an error -snackbar is displayed, then I quickly change data to correct and color of snackbar and the message change, but the visibility time does not count again, it is based on the old one. How can I do this so that time is reset every time the snackbar is opened? I mean, if snackbar is visible and I open another one, time will count again.
App.vue
<template>
<v-app>
<v-main class="grey lighten-3">
<router-view></router-view>
<Snackbar />
</v-main>
</v-app>
</template>
<script>
import Snackbar from "./components/Snackbar";
export default {
name: "App",
components: {
Snackbar
}
};
</script>
snackbar.module.js
const state = {
visible: false,
color: "success",
text: "",
timeout: 4000
}
const mutations = {
open(state, payload) {
state.text = payload.text;
if (payload.color) { state.color = payload.color; }
if (payload.timeout) { state.timeout = payload.timeout; }
state.visible = true;
},
close(state) {
state.visible = false;
state.text = "";
}
}
export default {
namespaced: true,
state,
mutations
}