超时后如何更改 V-Snackbar 的值答案

【问题标题】：How to change value of V-Snackbar after timeout超时后如何更改 V-Snackbar 的值
【发布时间】：2021-10-14 17:42:29
【问题描述】：

我使用 vuex、snackbar.js 和 Snackbar.vue。当我从组件单击提交按钮时，它会激活 vuex 商店中的弹出值。如果 PopUpDialog===true 则 Snackbar.vue 出现在顶部。但问题是，虽然在 2000duration 之后，snackbar 消失了，但弹出的值仍然是 true。因此，我不能再打电话给小吃店了。

<template>
   <v-snackbar
      :timeout="timeout"
      top
      :color=popup_type
      outlined
      right
    >
     {{popup_message}}
    </v-snackbar>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default
  {
    data() 
    {
        return{        
          timeout:2000
        }
    },
   
    computed: mapGetters({     
      popup :'GETTER_POPUP_VALUE',      
      popup_message:'GETTER_POPUP_MESSAGE',
      popup_type:'GETTER_POPUP_TYPE'
    }),   
  }
</script>
<style>
</style>

从第一个组件开始，我这样称呼snackbar；

 <pop-up v-if="this.PopUpDialog === true"></pop-up>

和

//HERE I call Snackbar
             this.$store.dispatch('SET_POPUP_VALUE',true);
             this.$store.dispatch('SET_POPUP_TYPE','error');
             this.$store.dispatch('SET_POPUP_MESSAGE','Listeleme için en az bir kriter girilmelidir. (140)');

我不明白应该在何时何地更改 PopUpDialog 的值。

【问题讨论】：

标签： vue.js vuetify.js vuex

【解决方案1】：

我已经这样解决了；

<template>
       <v-snackbar
          :timeout="timeout"
          top
          :value="popup"
          @input="snackbarClose"
          :color=popup_type
          outlined
          right
        >
         {{popup_message}}
        </v-snackbar>
    </template> 
    methods: {
          snackbarClose(val) {
            this.$store.dispatch("SET_POPUP_VALUE", val)
          }
        }

【讨论】：

【解决方案2】：

您需要一个 v-model 用于小吃店。

【讨论】：