CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Andor Németh
Andor Németh

Reputation: 499

How do I assign a timeout variable to the <v-alert> tag in Vuetify?

I would like to display an alert box which notifies the user about something. I would like it to disappear after 5 seconds even if the user didn't acknowledge it.

I already tried timeout and :timeout attributes but none of those seem to work and according to Vuetify docs they don't even exist in the tag so I'm clueless.

Template:

<div>
      <v-alert
        :value="alert"
        v-model="alert"
        dismissible
        color="blue"
        border="left"
        elevation="2"
        colored-border
        icon="mdi-information"
      >Registration successful!</v-alert>
    </div>

    <div class="text-center">
      <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">Click Me</v-btn>
        </template>

        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>Privacy Policy</v-card-title>

          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <div class="flex-grow-1"></div>
            <v-btn color="primary" text v-if="!alert" @click="dialog = false, alert">I accept</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
</div>

Script:

import Vue from "vue";

export default {
  data() {
    return {
      alert: false,
      dialog: false
    };
  },

  created() {
    setTimeout(() => {
      this.alert = false
    }, 5000)
  }
};

Upvotes: 3

Views: 14477

Answers (4)

code-8
code-8

Reputation: 58760

I recommend you use Snackbar instead that's what Vuetify called it

Then you just add this prop

:timeout="2000"

https://vuetifyjs.com/en/components/snackbars/#timeout

Upvotes: 0

amthekkel
amthekkel

Reputation: 41

You could watch for changes to the alert property and set a timeout whenever the alert is set to true i.e. the alert is shown.

import Vue from "vue";

export default {
  data() {
    return {
      alert: false,
      dialog: false
    };
  },
  watch: {
    alert(new_val){
      if(new_val){
        setTimeout(()=>{this.alert=false},3000)
      }
    }  
  }
};

Upvotes: 3

Remy Baas
Remy Baas

Reputation: 1

try this

setInterval: 5000;

that should do the trick, its just like timeout!

but you still need to make a function for your timeout

maybe you should take a look on w3schools.com. and take a look with what you can do with alerts!

Upvotes: -1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In created hook add timeout range with 5s that update alert property with false:

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

in template bind v-alert's value prop to alert data property :

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

    </div>
  </v-app>

check this pen

Upvotes: 5

Related Questions