CODEWITHSUNDEEP
vue.jsvuejs2
yabashist
yabashist

Reputation: 11

Update data after change without page refreshing using vue.js

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.

Upvotes: 1

Views: 9479

Answers (2)

Jayashree K
Jayashree K

Reputation: 151

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

for example

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

Upvotes: 0

Hitori
Hitori

Reputation: 589

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.

Upvotes: 4

Related Questions