如何为 Vuetify 中的 <v-alert> 标签分配超时变量？答案

【问题标题】：How do I assign a timeout variable to the <v-alert> tag in Vuetify?如何为 Vuetify 中的 <v-alert> 标签分配超时变量？
【发布时间】：2020-01-17 08:28:48
【问题描述】：

我想显示一个警告框，通知用户某事。即使用户没有确认，我也希望它在 5 秒后消失。

我已经尝试过 timeout 和 :timeout 属性，但这些属性似乎都不起作用，根据 Vuetify 文档，它们甚至不存在于标签中，所以我一无所知。

模板：

<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>

脚本：

import Vue from "vue";

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

在创建的钩子中添加带有 5s 的超时范围，用 false 更新 alert 属性：

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

在模板中将v-alert 的value 属性绑定到alert 数据属性：

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

    </div>
  </v-app>

检查这个pen

【讨论】：

请通过在您的问题中添加一个名为 EDIT 的部分来转发新代码
不得不创建一个新项目并将代码粘贴到其中，因为前一个项目有其他问题。感谢您的解决方案！

【解决方案2】：

您可以观察警报属性的变化，并在警报设置为 true 时设置超时，即显示警报。

import Vue from "vue";

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

【讨论】：

【解决方案3】：

试试这个

setInterval: 5000;

这应该可以解决问题，就像超时一样！

但你仍然需要为你的超时创建一个函数

也许你应该看看w3schools.com。看看你可以用警报做什么！

【讨论】：

但是我应该把这段代码放在哪里呢？我不能把它放在标签里。
推荐 w3schools.com 作为资源存在问题。那里提出的一些解决方案包括 SQL 注入等安全问题。