时间戳

首页 > 解决方案 > 更改后更新数据而不使用 vue.js 刷新页面

vue.js - 更改后更新数据而不使用 vue.js 刷新页面

问题描述

我写了这样的代码：

<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 秒更新一次数据。所以我认为手动更新并不是一个好主意。

标签： vue.jsvuejs2

解决方案

做这样的事情

// 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自动更新。这也将更新您的 UI。

推荐阅读