Vue highlights the updated data in the list

<div class="chat-user" v-for="user in userList" :key="user.openid">
    <img class="chat-avatar" :src="user.photo" alt="">
    <div class="chat-user-name">
        <span>{{user.nickname}}</span>
    </div>
</div>

1. Use v-for to traverse userList and display content on demand

:

2.

3. Problem encountered:
how can users with new messages be marked?

Aug.13,2021

add a hasNews attribute to the data in UserList, and set hasNews to true, when a new message is passed in. After reading the message, set it to false


first of all, determine whether has a new message is the front-end judgment or the back-end judgment
if the backend judges user add an attribute
otherwise, the front end needs to record the status of each user and compare it one by one before updating. Users with new messages are highlighted. Click

and then reset


Let the backend give a field to determine whether it is a new message, but if it is refreshed in real time, you should still use WebSocket

.
Menu