[Vuejs]-There's a way to vuetify snackbar opens just once?

by

2👍

✅

The simple solution is to use LocalStorage to save snackbar data on the client.

1.When the component is first created, get the value of mySnackbarValue stored in localStorage and set it to the value of snackbar of our component data if it exits in localStorage.

created(){
    if (localStorage.getItem('mySnackbarValue')) this.snackbar = JSON.parse(localStorage.getItem('mySnackbarValue'));
}

NOTE: Since LocalStorage stores strings only, so, JSON.parse(localStorage.getItem('mySnackbarValue')); parses back to Boolean.

2.Now, we to need set the value of mySnackbarValue in our localStorage when the snackbar value of component data changes by using watch.

watch:{
    snackbar:{
        handler(){
            localStorage.setItem('mySnackbarValue', this.snackbar);
        },
    },
}

3.snackbar in data component is set true by default.

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true
    };
  }
})

The complete code is as follows:

<template>
  <v-card>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      <router-link :to="rota" @click="snackbar = false" id="snackbarTexto"
        ><span>{{ text }}</span></router-link
      >
      <v-btn id="btnSnackbar" flat @click="snackbar = false">
        Fechar
      </v-btn>
    </v-snackbar>
  </v-card>
</template>

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true,
      y: "top",
      x: null,
      mode: "",
      timeout: 0,
      text: "Clique aqui para preencher a avaliação do módulo",
      rota: "/avaliacao_modulo"
    };
  },
  watch: {
    snackbar: {
      handler() {
        localStorage.setItem('mySnackbarValue', this.snackbar);
      },    
    },
  },
  created(){
   if (localStorage.getItem('mySnackbarValue')) this.snackbar = JSON.parse(localStorage.getItem('mySnackbarValue'));
  }
})
👤im.sagar.samal

1👍

I would recommend using a library such as js-cookie to store a cookie denoting if the user has seen the snackbar message yet.

I’m not sure what type of build system you are using, or if you are using node/npm. You will have to import some type of cookie library, or manage the cookies yourself via vanilla JavaScript.

Also, I left the part of abstraction to you. Make sure that this is easy to change in case you want to implement any new types of messages later on. I hope this helps out!

<template>
    <v-card>
        <v-snackbar v-model="showSnackbar"
                    :bottom="y === 'bottom'"
                    :left="x === 'left'"
                    :multi-line="mode === 'multi-line'"
                    :right="x === 'right'"
                    :timeout="timeout"
                    :top="y === 'top'"
                    :vertical="mode === 'vertical'">
            <router-link :to="rota" @click="showSnackbar = false" id="snackbarTexto">
                <span>{{ text }}</span>
            </router-link>

            <v-btn id="btnSnackbar" flat @click="showSnackbar = false">
                Fechar
            </v-btn>
        </v-snackbar>
    </v-card>
</template>

// Import js-cookie
// https://www.npmjs.com/package/js-cookie
import cookie from 'js-cookie';

new Vue({
    el: '#app',
    data () {
        return {
            // Set to false initially
            showSnackbar: false,

            y: "top",
            x: null,
            mode: "",
            timeout: 0,
            text: "Clique aqui para preencher a avaliação do módulo",
            rota: "/avaliacao_modulo"
        };
    },

    created() {
        // Give the snackbar cookie a name
        let cookieName = 'snackbar';

        // Check browser cookies for a snackbar cookie
        let snackbarCookie = cookie.get(cookieName);

        // If we have no cookie
        if (!snackbarCookie) {
            // Set a cookie so the snackbar doesn't come up again
            cookie.set(cookieName, true);

            // Show the snackbar
            this.showSnackbar = true;
        }
    },
});
👤Colin

Leave a comment