In Vue how do I replace array with new array?

Question

Every 10 seconds I query my database for latest fire calls. I do app.events = data.calls but my data doesn't refresh. I initialize the data with the same function that is called every 10 seconds. I see the table. How I do I replace an array in Vue with an array?

<html>
<head>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/vue"></script>
  <script>
  $(function() {

    function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
      } else {
          $('#demo').text("Geolocation is not supported by this browser.");
      }
    }
    function showPosition(position) {
      $.get('http://localhost:8000/api/nearest_events?lng='+position.coords.longitude+'&lat='+position.coords.latitude, function(data) {
        //app.$set(app.events, Object.assign({}, app.events, data.calls));
        app.events = data.calls;
      })
    }
app = new Vue({
  el: '#app',
  data: {
    events: []
  },
  created: function() {
    setInterval(getLocation(), 10000)
  }
})
  })

</script>
<style>
td, th {border:1px solid #000;padding:5px}
table { border-collapse:collapse;}
</style>
</head>
<body>
  <div id="app">
<table>
  <tr v-for="event in events">
    <td>{{ event.datetime }}</td>
    <td>{{ event.address }}</td>
    <td>{{ event.type }}</td>
    <td>
<table>
<tr><th>Unit</th><th>Dispatched at</th><th>Arrived at</th><th>In service</th></tr>
<tr v-for="unit in event.units">
<td>{{ unit.unit }}</td>
<td>{{ unit.dispatched }}</td>
<td>{{ unit.arrived }}</td>
<td>{{ unit.in_service }}</td>
</tr>
</table>


    </td>
  </tr>
</table>
</div>
</body>
</html>

stackoverflow.com/help/mcve

thanksd
– thanksd

2017-10-09 20:27:44 +00:00
Commented Oct 9, 2017 at 20:27 — thanksd
– thanksd, Commented Oct 9, 2017 at 20:27

Eric G · Accepted Answer · 2017-10-09 21:25:22Z

1

It appears that your problem is in setInterval. When you call getLocation it does not require the ()

i = 0;
app = new Vue({
  el: '#app',
  data: {
    events: []
  },
  methods: {
    getLocation: function () {
      var self = this;
      i+=1;
      self.events =  [1,2,3,i];
    }
  },
  created: function() {
    self = this;
    setInterval(self.getLocation, 1000);
  }
})

And here is a working demo:

https://codepen.io/egerrard/pen/EwLVNB

edited Oct 9, 2017 at 21:25

answered Oct 9, 2017 at 20:42

Eric G

2,6271 gold badge16 silver badges22 bronze badges

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

4 Comments

Tim Clemans Over a year ago

That doesn't seem to fix it. See codepen.io/policevideorequests/pen/GMdpZr where the last block only updates to 1 not 2,3,4,etc

Eric G Over a year ago

Ah I see what you are looking for. Yes, still is working correctly, you just need to update your setInterval. I have updated my answer. Also view at codepen.io/egerrard/pen/EwLVNB

Roy J Over a year ago

Try setInterval(self.getLocation, 1000);. Vue binds this for methods.

Roy J Over a year ago

Also, it works fine to update the data from outside the Vue.

Collectives™ on Stack Overflow

In Vue how do I replace array with new array?

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