javascript - 仅将新记录追加到表Vue JS

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

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

在创建的钩子上，我介绍了一种每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表中？

最佳答案

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

关于javascript - 仅将新记录追加到表Vue JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57928519/