Why not implement scrolling to the last added item?

Why scrollTop can not see the item that we just added to the array push? The method works in Vue component when a new message, then scroll down to the previous one, i.e. the penultimate.

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) => {

});
}


Here is output message:

<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>
April 7th 20 at 15:35
2 answers
April 7th 20 at 15:37
Solution
Because it is not. The DOM update occurs immediately after the data changes. Use nextTick.

And get rid of jquery. Put the ref in a list:

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

And after adding data do this:

this.$nextTick(() => {
 const { messages } = this.$refs;
 messages.scrollTop = messages.scrollHeight;
});
and you can bind to a specific element? or it automatically looks to see which element changed? - brando_Hin commented on April 7th 20 at 15:40
Dig to the side of the watch.
I now have a decorator to TS - @Watch there easier. - Destinee.Hodkiewicz commented on April 7th 20 at 15:43
@Kayden_Dool, thank you - brando_Hin commented on April 7th 20 at 15:46
how do I record here that without jquery?

$('.contact-list__items[data-id="'+this.dialogSelect+'"]').find('.typing').removeClass('active');
- brando_Hin commented on April 7th 20 at 15:49
@Gerald_Hessel43how to work with the classes described in the documentation. Open, read. - Halle_Botsfo commented on April 7th 20 at 15:52
April 7th 20 at 15:39
Yes, DOM may not change immediately, and reactivity does not work here.
The function should fail and return to the main thread.
$nextTick or setTimeout(() => {}); , that one and the same.
Because of the object for listenForWhisper not now.

Find more questions by tags Vue.js