In my database table, new records are inserted every 10 seconds.
Using Vue and Axios, I am displaying the latest 20 records to the user in an HTML table.
In the created hook, I have implemented a method that fetches data every 5 seconds.
window.setInterval(() => {
this.getRecentTrades()
}, 5000)
Here is the code for my table rows:
<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>
How can I compare old records with the new ones and only add the new ones to the HTML table?