скрыть vue компонент через несколько секунд после его создания

Question

<template>
  <div class="notification" v-show="notificationIsShow">
    {{text}}
  </div>
</template>

<script>
  export default {
    props: {
      text: String,
    },

    data() {
      return {
        notificationIsShow: true
      }
    },

    methods: {
      hideNotification(){
        alert('triggered')
        this.notificationIsShow == false
      }
    },

    mounted () {
      setTimeout(this.hideNotification(), 4000)
    }
  }
</script>

Итак, у меня есть компонент. Он отображает текст. Я хочу отображать его несколько секунд, затем скрыть. Как какое нибудь предупреждающее сообщение. Я пытаюсь задать отложенное выполнение функции, которая изменит в флаг с true на false, и элемент скроется. Вроде всё просто, но вот только функция отрабатывает сразу после срабатывания хука mount( если поместить в create - тоже самое).

Тоесть по предоставленному мною коду - я жду, что всплывающее сообщение "triggered" появится через 4 секунды, а оно появляется сразу при загрузке страницы? Помогите получит нужный результат

Answer 1

Я вызываю функцию в mount, в которой описан setTimeout- и это работает. В моём вопросе получается наоборот - в mount: setTimeout, в котором вызывается функция с каким-то действием. Похоже я до конца не понимаю, как это работает, либо для vue это работает как-то по-другому. Вот код, который решает мою задачу.

<template>
  <div class="notification" v-show="notificationIsShow">
    {{text}}
  </div>
</template>

<script>
  export default {
    props: {
      text: String,
    },

    data () {
      return {
        notificationIsShow: true
      }
    },


    methods:{
      hideNotification () {
        setTimeout(() => {
          this.notificationIsShow = false
        }, 3000);
      },
    },

    mounted () {
      this.hideNotification()
    }
  }
</script>

БЛОГ НА HUSL

скрыть vue компонент через несколько секунд после его создания

Ответы (1 шт):