https://i.sstatic.net/gpulc.png
In my project, I am utilizing the Vuetify component <v-snackbar and triggering it based on values stored in localStorage.
/create
Once I have created my object
For example:
localStorage.setItem('alert', true)
localStorage.setItem('alertColor', 'green')
localStorage.setItem('alertMessage', this.form.values.name + ' - created successfully!')
Using these codes
<v-snackbar timeout="2000" v-model="alert" absolute top :color="alertColor" outlined right>
<strong>
{{ alertMessage }}
</strong>
</v-snackbar>
/index (list)
I retrieve data from localStorage to display a relevant alert message + color.
export default {
data() {
return {
alert: localStorage.getItem('alert'),
alertColor: localStorage.getItem('alertColor'),
alertMessage: localStorage.getItem('alertMessage'),
After the timeout="2000", my alert disappears. To prevent seeing the same alert upon page refresh, I remove the data from localStorage.
localStorage.removeItem('alert')
localStorage.removeItem('alertColor')
localStorage.removeItem('alertMessage')