Vue JS- Cannot update html table with data from Vuex

Question

I'm relatively new to vue.js and especially nuxt. I have a small function to get data from the backend and update a table. I'm not sure how to debug this task as I'm calling this in a mounted hook and I can see the data in vuex tab when I load the page.

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

For some reason I cannot populate the table. I can see that the function pollData() Is being called every three seconds after page loads. I'm not sure why I can't see the data in the table.

How do I 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>

Your template tries to iterate polling, but that's set to the timer ID (an integer) in pollData(). — tony19
– tony19, Commented Oct 7, 2020 at 21:37
@tony19 how to I get the data from the pollData function and pass to the data() property to update template? — tomoc4
– tomoc4, Commented Oct 7, 2020 at 21:52
Assuming getOrders fetches data, store the result in a Vuex state variable, then update your v-for to iterate that state variable. — tony19
– tony19, Commented Oct 7, 2020 at 21:53

Bulent · Accepted Answer · 2020-10-07 21:55:13Z

1

You didn't fetch polling data from your store.

<script>
import { mapState } from "vuex";
export default {
  
  // remove polling from data object and
  
  computed: {
    ...mapState({
      polling: (state) => state.polling.polling, // Give the correct path.
    })
  },
  created() {
    this.pollData();
  }
}
</script>

If I were you I would call this.pollData() in created hook.

answered Oct 7, 2020 at 21:55

Bulent

3,4411 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tomoc4 Over a year ago

I tried your solution but it seems the pollData() function is calling more than every three seconds and I also have an error Cannot read property 'polling' of undefined

tomoc4 Over a year ago

I've just corrected the path and viola it's worked. Thank you for showing me how to use store data like this.

tomoc4 Over a year ago

I have another issue with this code when I leave the page the polling still continues. Do you know how I can call beforeDestroy?

Bulent Over a year ago

No, I don't know.

Collectives™ on Stack Overflow

Vue JS- Cannot update html table with data from Vuex

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related