Всем привет. Пишу пет-проект с чатом на Vue 3 +

Question

Всем привет. Пишу пет-проект с чатом на Vue 3 +

Composition API. Возникла проблема с рендером. При отправке сообщения окно должно скроллиться в самый низ до него, но получаю только предпоследнее сообщение, будто бы этот метод должен вызываться в методе onUpdated, но он не вызывается vue, что странно.

При методе скролла до низа вызывается console.log с последним элементов у рефа, если выводить в консоль сам реф, то там есть этот элемент, однако .lastChild говорит иначе

На втором скриншоте верстка.

На третьем скриншоте сам код, handlerSubmit вызывается при отправке сообщения.

Как можно отлавливать последнее сообщение в скрипте? Как я понимаю, нужно заставить его ререндерить явно

#frontend #javascript #programming #russian #vue.js

0

21.01.2022

3 ответов

18 просмотров

Paul Valeska Автор вопроса

Юрий Дмитриев
Я думаю, что ты должен сначала отрендерить это соо...

Благодарю! Переписал так. Но почему-то кажется, что можно как-то сделать попроще. Но пока-что других вариантов нет)

0

21.01.2022

Юрий Дмитриев

Paul Valeska

Благодарю! Переписал так. Но почему-то кажется, чт...

У тебя два варианта. Либо после добавление крутить вниз самому. Либо отслеживать размер элемента и если он увеличился, значит добавилось сообщение, тогда ты крутишь скролл вниз. Но такая идея вообще не очень. Так как если ты был в середине чата и тебе пришло сообщение и он прокрутился вниз. Тебе нужно отслеживать находится ли скролл внизу и если он внизу, то только в этом случае его прокручивать вниз.

0

21.01.2022

Юрий Дмитриев · Accepted Answer

Юрий Дмитриев

Я думаю, что ты должен сначала отрендерить это сообщение, а потом отправить скролл к нему. nextTick тебе поможет

0

21.01.2022

169 похожих чатов

Всем привет. Пишу пет-проект с чатом на Vue 3 +

3 ответов

Похожие вопросы