I am new to working with Vue.js and particularly Nuxt. I am facing an issue with updating a table using data fetched from the backend. Even though I can see the data in the Vuex tab when the page loads, I cannot seem to populate the table with it. The function pollData() is being called every three seconds after the page loads, but the data is not appearing in the table as expected.
payload:Object
count:2
next:null
previous:null
results:Array[2]
0:Object
1:Object
created_at:"2020-09-14T12:00:00Z"
event_name:"wrw"
id:2
market_name:"wrwr"
market_type:"wrwr"
odds:242
runner_name:"wrwr"
side:"wrwrw"
stake:424
How can I successfully update a table with Vuex data?
<template>
<div id="app">
<h1>Orders</h1>
<table>
<thead class="thead-dark">
<tr>
<th>Time Stamp</th>
<th>Event Name</th>
<th>Market Name</th>
<th>Market Type</th>
<th>Runner Name</th>
<th>Side</th>
<th>Odds</th>
<th>Stake</th>
</tr>
</thead>
<tbody>
<tr v-for="o in polling" :key="o.id">
<td>{{o.created_at}}</td>
<td>{{o.event_name}}</td>
<td>{{o.market_name}}</td>
<td>{{o.market_type}}</td>
<td>{{o.runner_name}}</td>
<td>{{o.side}}</td>
<td>{{o.odds}}</td>
<td>{{o.stake}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
import { mapMutations } from 'vuex'
export default {
data () {
return {
polling: null
}
},
methods: {
pollData () {
this.polling = setInterval(() => {
this.$store.dispatch('getOrders')
}, 3000)
}
},
beforeDestroy () {
clearInterval(this.polling)
},
mounted () {
this.pollData()
}
}
</script>