How to display the v-alert again once the close button is clicked in Vuetify?-CodePudding

I am using a dismissible v-alert and on closing the alert it should again display after 2 hours.
I tried with a snack bar as well but no output. I am trying to hide and show v-alert based on time.

<v-alert
 border="left"
 close-text="Close Alert"
 color="deep-purple accent-4"
 dark
 dismissible
 text-align ='center'
>
 Total call list - 118 And Yet to call list - 80
</v-alert>

Can you please look into it?

CodePudding user response：

As it is mentioned in the documentation-

You can restore the alert by binding v-model and setting it to true.

Here is the working demo of-

If you want to manually open an alert (use a button to toggle it)-

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-alert
          v-model="alert"
          border="left"
          close-text="Close Alert"
          color="error"
          dark
          dismissible
          
          >
          Hello, I am an alert.
        </v-alert>
        <div >
          <v-btn
            v-if="!alert"
            color="red"
            dark
            @click="alert = true"
            >
            Re-open
          </v-btn>
        </div>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        
        data () {
      return {
        alert: true,
      }
      },
      })
    </script>
  </body>
</html>

If you want to open after a particular time (use any time function to monitor)-

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-alert
          v-model="alert"
          border="left"
          close-text="Close Alert"
          color="error"
          dark
          dismissible
          
          >
          Hello, I am an alert.
        </v-alert>
        <div  v-if="!alert">
          WAIT FIVE SECONDS FOR IT TO RE-OPEN ⏳
        </div>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data () {
          return {
            alert: true,
          }
        },
        watch: {
              alert(newVal) {
                  if (!newVal) {
                      setTimeout(() => {
                          this.alert = true;
                      }, 5000);
                  }
              },
          },
      })
    </script>
  </body>
</html>

An Important Tip-

An event (something like a notification) should be triggered from the backend that two hours have passed since closing the alert and on that event's listening the client should re-open the alert. To depend only on the client side to do this job can be unsuccessful because on the client side the time will restart once the page loads.

CodePudding user response：

you should add :value to alert

<v-alert type="success" :value="alert">
    I'm a success alert.
  </v-alert>

later

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
       alert: true,
    }
  },
  created(){
    setTimeout(()=>{
      this.alert=false
    },5000)
  }
})

It beats every 5 seconds, you update here