Почему не выполняется скролл к последнему добавленному элементу?

Question

[Analka]

Почему scrollTop не видит элемент, который мы только что добавили в массив push? Метод срабатывает в Vue компоненте, когда пришло новое сообщение, то скролл опускается к предыдущему, то есть предпоследнему.

if (this.dialogSelect > 0){
    window.Echo.private('chat.' + this.dialogSelect)
        .listen('DialogMessage',({data,user_id}) => {
                this.messages.push({
                    avatar: this.userAuth.avatar,
                    fullname: this.userAuth.fullname,
                    user_id: this.userAuth.id,
                    replay: data
                });
            $('.chat--messages__wrapper').scrollTop($('.chat--messages__wrapper').prop('scrollHeight'));
        })
        .listenForWhisper('typing', (e) => {

        });
}

Вот так выводятся сообщения:

<ul class="chat--messages__wrapper"  v-on:scroll.passive="onScroll">
                                    <li class="chat--messages__item"  v-for="(message,index) in messages">
                                        <a :href="'/profile/'+message.slug" target="_blank" class="chat--user__image" v-bind:style='{ backgroundImage: `url("/storage/${message.avatar}")` }'></a>
                                        <div class="chat--user__data">
                                            <p class="last--massage" v-html="message.replay"></p>
                                        </div>
                                    </li>
                                </ul>

Answer 1

[0xD34F]

Потому что его нет. Обновление DOM происходит не сразу же после изменения данных. Используйте nextTick.

И избавьтесь от jquery. Поставьте ref на список:

<ul class="chat--messages__wrapper" ref="messages">

А после добавления данных делайте так:

this.$nextTick(() => {
  const { messages } = this.$refs;
  messages.scrollTop = messages.scrollHeight;
});

Comments

[Analka]

а можно привязать к определенному элементу? или он автоматом смотрит, какой элемент изменился?

[Андрей Пике]

Копайте в сторону watch.
У меня сейчас декоратор в TS - @Watch, там проще.

[Analka]

Андрей Пике, спасибо

[Analka]

а как мне записать вот такое без jquery?

$('.contact-list__items[data-id="'+this.dialogSelect+'"]').find('.typing').removeClass('active');

[0xD34F]

Как работать с классами, рассказывается в документации. Откройте, почитайте.

Answer 2

[Андрей Пике]

Да, DOM не может меняться сразу, и реактивность тут не работает.
Функция должна завершиться и вернуться к основному потоку.
$nextTick или setTimeout(() => {}); , что одно и то же.
Потому что объекта для listenForWhisper сейчас нет.