vue.js: Highlighting a newly inserted row

Question

We are using vue.js to render logs from live stream as follows:

                    <tr v-else v-for="log in logs" v-cloak>
                        <td>{{log.id}}</td>
                        <td>...</td>
                    </tr>

We unshift the array with elements from EventSource like this:

    this.eventSource.onmessage = function(log) {
        if (log.data) {
            vue.logs.unshift(JSON.parse(log.data));
        }
    };

This is all nice and working. What I would like to do is to highlight the newly inserted elements for 10 seconds with certain colour so that users can see there is something new.

Answer 1

This would be a good place to use a List Transition effect. Here's a sample of how to apply a highlight effect to new rows in a table:

Template

<table>
  <tbody is="transition-group" name="list">
    <tr v-for="log in logs" :key="log.id">
      <td>{{ log.id }}</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

CSS

.list-enter-active {
  transition: all 5s;
}
.list-enter {
  background: yellow;
}

This will give a 5 second yellow background highlight to newly added log entries.