Vuetify Snackbar покинуть событие

Question

Мне удается реализовать глобальную Vuetify Snackbar.

Моя проблема - определить, когда закусочная закрылась. Я читал, что этот компонент поддерживает событие перехода Vue с версии 1.2. Но он работает только на входе, а не на выходах.

здесь скрипка для понимания.

<transition @before-enter="beforeEnter" @before-leave="beforeLeave" @after-enter="afterEnter" @after-leave="afterLeave" @leave="leave">
    <v-snackbar v-model="snackbar" top right>
        Hello
        <v-btn @click="snackbar = false" dark>Close</v-btn>
    </v-snackbar>
</transition>

Answer 1

Я столкнулся с той же проблемой и решил так:

export default {
  data: () => ({
    errorMessage: '',
    snackTimeout: 6000,
  }),
  watch: {
    errorMessage() {
      setTimeout(() => {
        this.clearErrorMessage();
      }, this.snackTimeout);
    },
  },
  methods: {
    setErrorMessage(message) {
      this.snackMessage = message;
    },
    clearErrorMessage() {
      this.snackMessage = '';
    },
  },
};

<template>
    <v-snackbar
      :value="errorMessage"
      :timeout="snackTimeout"
      top
    >
      {{ errorMessage }}
      <v-btn
        color="error"
        flat
        @click.stop="clearErrorMessage"
      >
        {{ 'close' }}
      </v-btn>
    </v-snackbar>
</template>

• Определите атрибут с тайм-аутом, а другой - с сообщением, которое будет отображаться на панели закусок.
• Определите функцию для установки сообщения и другую для его очистки.
• Определите часы для текста сообщения и установите таймер с тем же тайм-аутом закусочной, чтобы очистить его.
• Снэк-бар появляется только тогда, когда сообщение не пустое.