Обновлять данные после изменения без обновления страницы с помощью vue.js

Question

Я написал такой код:

<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>

Теперь для обновления информации я просто использую кнопку обновления.

Что и где мне добавить несколько строк кода для обновления информации, но без обновления страницы?Потому что я обновляю данные каждые 5 секунд.Поэтому я думаю, что ручное обновление не очень хорошая идея.

Answer 1

сделать что-то вроде этого

// 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
      })

  }
}

, это позволит получить ваши данные из вашего API и автоматически обновить list.это также обновит ваш пользовательский интерфейс.