javascript - 仅将新记录追加到表vue js

Question

我有一个数据库表，其中每 10 秒插入一次新记录。

使用 vue 和 axios，我在 HTML 表中向用户显示最新 20 条记录。

在创建的钩子(Hook)中，我引入了一种每 5 秒获取数据的方法

 window.setInterval(() => {
            this.getRecentTrades()
          }, 5000)

下面是我的表格行代码:

<tr v-for="recenttrade in recenttrades" :key='recenttrade.id' v-bind:class="recenttrade.side=='Buy' ? 'text-success' : 'text-danger'">
    <td>{{ recenttrade.price }} </td>
    <td>{{ recenttrade.size }} </td>
    <td>{{ recenttrade.timestamp }} </td>
    <td>{{ recenttrade.side }} </td>
</tr>

如何比较旧记录与新记录并仅将新记录附加到 HTML 表格？

Answer 1

基于https://v2.vuejs.org/v2/guide/list.html替换数组的部分似乎最好的解决方案就是简单地用 api 中的值重新分配本地值。 Vue 将自动使用其更改检测并仅重新渲染不属于上一个更新周期中的表的项目。