Update data after change without page refreshing using vue.js

Question

I wrote such code:

<template>
  <div class="home">
    <HelloWorld tableTitle="Goods:">
    <table class="table table-striped">
      <tbody>
        <tr v-for="(i, index) in items.data" :key="index">
         <td>{{ i.id }}</td>
         <td>{{ i.name }}</td>
         <td>{{ i.producer }}</td>
         <td><font-awesome-icon v-if="i.received" icon="check" /><font-awesome-icon v-else icon="times" /><td>
       </tr>
     </tbody>
    </table>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";

export default {
  name: "home",
  components: {
    HelloWorld
  },

data: () => ({
  items: {},
  errors: []
}),

beforeMount() {
  axios
    .get("http://40.115.119.247/AgileSelection/tnt/status")
    .then(response => {
      this.items = response.data;
      console.log(this.items);
    })
    .catch(e => {
      this.error.push(e);
    });
  }
};
<script>

Now, for refreshing information I just use the refresh button.

What and where should I add some lines of code to update information but without refreshing the page? Because, I am updating data every 5 seconds. So I think that manually updating is not so good idea.

Hitori · Accepted Answer · 2018-10-09 11:29:21Z

4

do something like this

// data property
data () {
  return {
    ...
    interval: null
  }
},
// in your created hook
created () {
  this.interval = setInterval(this.refreshData, 5000)
},
beforeDestroy () {
  clearInterval(this.interval)
},

// in methods property
methods: {
  refreshData () {
    // fetch data
    axios.get("http://40.115.119.247/AgileSelection/tnt/status")
      .then(response => {
        this.items = response.data
      })

  }
}

this will fetch your data from your API and update the list automatically. this will update your UI as well.

edited Oct 9, 2018 at 11:29

answered Oct 9, 2018 at 11:25

Hitori

5891 gold badge5 silver badges21 bronze badges

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

4 Comments

Thomas Over a year ago

Please clear the Interval in beforeDestroy hook. ;)

yabashist Over a year ago

It doesn't work... I paste this code and deleted a beforeMount and it now non working

Hitori Over a year ago

@yabashist, of course it will not, because that's just an example code to demo where you should put the auto-refresh logic.

yabashist Over a year ago

@Hitori so what should I do?

Jayashree K · Accepted Answer · 2020-12-01 14:30:55Z

0

you can try using location.reload() after the code where you register the update

for example

 handleSubmit() {
      this.registerServices(this.organization)
      location.reload();
    }

answered Dec 1, 2020 at 14:30

Jayashree K

1512 gold badges3 silver badges20 bronze badges

1 Comment

lacostenycoder Over a year ago

This is not the recommended way to handle updates in a single page app.

Collectives™ on Stack Overflow

Update data after change without page refreshing using vue.js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related