0
<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 секунды, а оно появляется сразу при загрузке страницы? Помогите получит нужный результат

1 ответ 1

0

Я вызываю функцию в 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>
1
  • setTimeout(this.hideNotification(), 4000) Тут ошибка. Правильно будет указать просто this.hideNotification, без круглых скобочек. С ними функция выполняется сразу. 11 ноя 2020 в 6:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.