How to periodically poll a back end API using vue.js?

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    loadData: function () {
      $.get('/api/data', function (response) {
        this.items = response.items;
      }.bind(this));
    }
  },
  ready: function () {
    this.loadData();

    setInterval(function () {
      this.loadData();
    }.bind(this), 30000); 
  }
});

<div id="app">
  <div v-for="item in items">{{ item.prop }}</div>
</div>

Something like this?

Hey guys - Thank for the question and answer. I want to do something like this on dashboard view that shows a list of activities, like inbound e-mails, home searches . . . This code would eliminate me from coding a refresh button on the page. Two questions.

1. Does the content refresh every 30 seconds even if the data didn't change? Any ui/performance hits if it does?

2. How would you go about installing an audible ding ("you got mail"), or update an icon on the page when data actually changes. For this, I'm thinking you want to retain the latest DTS of the previous fetch, compare to the latest DTS of the most recent fetch in the .ready function, and update the notification elements when a change occurs. Am I on the right track?

@Juukie Thanks for the reply. It works perfectly. Only one thing: for polling, we need to use setInterval(). Could you change it in your answer so others may just copy and paste?

Ah good spot @zhiyong, I've updated my reply!

@Juukie pusher sounds great, I can only find a Laracasts screencast from 2014 though. Can you point me towards the screencast with Pusher and Vue?

edit: found it https://laracasts.com/lessons/introducing-laravel-echo

Hey @slipperydippery you might want to check out https://laracasts.com/lessons/introducing-laravel-echo, it's coming with 5.3 this month.

@Juukie

Its a nice tips. But I am concern about one thing. Since JS is a single thread language, will it make our system slower when a lot of users will use this page and calling the same function again and again?

In that case, is there any other better option rather than using setInterval()?

@tisuchi I've never had performanceissues with it. You can always increase the timeout time if the data won't change that often off course.

@Jukkie

Just asking you since the page function running after a certain amount of time automatically...

Will setInterval() make my page slower while lot of users are using same page at a time?

@tisuchi I don't understand what you mean... What do you mean by 'slower while lot of user are using the SAME page at a time"? I mean, javascript is client side, so each client(user) will have their own instance of setInterval on their computer/device running..

Also I recommend you to clear the timer on destroy like so:

new Vue({
  el: '#app',
  data: {
    items: [],
    interval: null,
  },
  methods: {
    loadData: function () {
      $.get('/api/data', function (response) {
        this.items = response.items;
      }.bind(this));
    }
  },
  ready: function () {
    this.loadData();

    this.interval = setInterval(function () {
      this.loadData();
    }.bind(this), 30000); 
  },

 beforeDestroy: function(){
clearInterval(this.interval);
}
});

<div id="app">
  <div v-for="item in items">{{ item.prop }}</div>
</div>

@samfrjn11 great extra info. Indeed, clearing the interval should be added before the component is destroyed.