Можно ли во Vue использовать setTimeout в шаблоне?

Question

[dmitry2000]

:class="!$store.state.isOverlay ? 'scroll-y' : ''
Можно ли как-то поставить setTimeout к bind класса, чтобы, к примеру, через секунду только сработало?

Answer 1

[Вадим]

setTimeout возвращает id таймера. Таким образом, использовав его в шаблоне, Вы сразу получите true-like value. И класс навесится.
Сделайте появление класса в зависимости от значения свойства в data, по умолчанию свойство false, а в mounted сделайте setTimout, в котором поменяете это свойство на true - класс обновится.

Пример из документации: Работа с классами и стилями

Comments

[dmitry2000]

А динамично при изменении свойства из state как постоянно менять?

[Вадим]

dmitry2000, пока не очень понятно. Напишите подробнее.
Свойства, которые реактивно обновляются, если изменения произошли в state - computed;
Если Вы хотите менять значение через секунду после того, как оно обновилось в стэйте, то можно повесить watch на это свойство.

[dmitry2000]

Вадим, у меня в приложении своеобразная логика, но необходимо следующее - у меня модальное окно открывается, закрывается за 300 ms. При открытии $store.state.isOverlay становится true, при закрытии false. Но мне надо, чтобы класс scroll-y на каком-то диве в зависимости от состояния переменной isOverlay либо был, либо не был. А так как у меня анимация 300 ms, я хочу чтобы при закрытом окне класс был, потом при открытии его не было, а при закрытии через 300 ms снова был. И так каждый раз

[Вадим]

dmitry2000, ну тогда я вроде всё верно Вам написал. Тут watch в помощь.

[Вадим]

dmitry2000, То есть сделайте computed свойство

isOverlayActive() { return this.$store.state.isOverlay }

Дальше сделайте на него watch

watch: {
  isOverlayActive(value) {
    setTimeout(() => {
          this.showClass = value
    }, 300)
  }
}

ну и в data должно быть свойство showClass (ну или как Вам больше подходит), на которое смотрит v-bind:class.

Есть альтернативный вариант.
Вы можете при закрытии модалки диспатчить через 300мс дополнительный экшен или событие в глобальную шину и опираться на него. Тогда можно будет обойтись без watch.

[dmitry2000]

Не проверял, но наверное рабочее. Также сделал вот так:

data() {
        return {
            showClass: true
        };
    },
    methods: {
        changeClass() {
            if (!this.$store.state.isOverlay) {
                setTimeout(() => {
                    this.showClass = true;
                }, 1000);
            } else {
                this.showClass = false;
            }
        }
    },
    watch: {
        '$store.state.isOverlay': {
            handler() {
                this.changeClass();
            }
        }
    }

В шаблоне:
:class="{ 'scroll-y': showClass }"

[dmitry2000]

Вадим просто в моем случае при открытии класс должен мгновенно убираться, а вот при закрытии через время

[Вадим]

ну да, типа того

[Вадим]

dmitry2000, да, я понял