javascript - 如何将超时变量分配给 Vuetify 中的 <v-alert> 标签？

Question

我想显示一个警告框来通知用户一些事情。我希望它在 5 秒后消失，即使用户不承认它也是如此。

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

模板:

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

Answer 1

在创建的钩子(Hook)中添加 5 秒的超时范围，将 alert 属性更新为 false:

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

在模板中将 v-alert 的 value 属性绑定(bind)到 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