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。这也会更新您的用户界面。

Answer 2

您可以在注册更新的代码后尝试使用location.reload()

例如

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

更改后更新数据，而无需使用vue.js刷新页面

2 个答案: