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

admin管理员组

文章数量:1279113

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 modo 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)
  }
};

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 modo 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)
  }
};

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

Share Improve this question Follow edited Jul 8, 2020 at 10:42 Boussadjra Brahim 1 asked Sep 16, 2019 at 13:27 Andor NémethAndor Németh 49966 gold badges1212 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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)
      }
    }  
  }
};

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

Then you just add this prop

:timeout="2000"

https://vuetifyjs./en/ponents/snackbars/#timeout

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.. and take a look with what you can do with alerts!

本文标签： javascriptHow do I assign a timeout variable to the ltvalertgt tag in VuetifyStack Overflow