1

Доброго времени суток.

На сайте есть блок чата с сообщениями. Метод загрузки сообщений:

getMessages () {
                if(this.currentPage <= this.lastPage) {
                    this.getChatMessages({ userId: this.activeChatUser.id, page: this.currentPage })
                        .then(result => {
                            this.lastPage = result.messages.last_page
                            this.messages = [...result.messages.data.reverse(), ...this.messages]
                            console.log(result)
                            this.currentPage++;
                        });
                }

            },

Блок чата имеет определённую высоту и соответственно скролл. При загрузке первой страницы сообщений блок должен проскролится вниз (для примера указано значение 100):

updated() {
            if(this.currentPage === 1 && typeof this.$refs.messageArea !== 'undefined'){
              
                this.$refs.messageArea.scrollBy(0, 100);
                
                // 0
                console.log(this.$refs.messageArea.scrollTop);
            }
        },

Но скролла не происходит, scrollTop равен 0. В чём может быть проблема?

PS. С документации Vue, хук updated - данные обновлены, обновлено DOM-дерево. Через консооль инструментов разработчика всё работает.

1
  • 1
    А если подебажить?
    – Qwertiy
    12 июн 2020 в 22:22

1 ответ 1

0

Правильный ответ кроется в цикле событий (Event Loop) самого JavaScript.

Хук update будет вызван только после полной отработки метода.

Поскольку в методе инкрементировалось значение текущей странички (по дефолту было 1):

// стало 2
this.currentPage++;

условие не выполнялось:

if(this.currentPage === 1 && typeof this.$refs.messageArea !== 'undefined')

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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