Laravel/Vue.js - 计时器答案

【问题标题】：Laravel/Vue.js - TimerLaravel/Vue.js - 计时器
【发布时间】：2018-11-14 20:04:43
【问题描述】：

我想寻求帮助。我下载了这个项目来学习如何使用Vue.js： https://justlaravel.com/vue-js-crud-laravel/

我想每 1 秒从数据库中自动下载一次数据。我已经到了可以制作一个按钮来更新这个方法但我不能按时完成的地步。

它起作用的按钮：

 <button class="btn btn-primary" @click.prevent="getVueItems()" id="name" name="name">
 <span class="glyphicon glyphicon-plus"></span> Refresh
 </button>

自动刷新不起作用：

<script type="text/javascript">
    getVueItems();
</script>

Vue.js 方法：

  methods: {
  getVueItems: function getVueItems() {
  var _this = this;

  axios.get('/vueitems').then(function (response) {
    _this.items = response.data;
  });
  setTimeout(getVueItems(), 1000);
  },

【问题讨论】：

使用 setInterval setInterval(function(){ alert("Hello world"); }, 3000); 在这里你可以找到更多信息renatello.com/code/vue-js-polling-using-setinterval

标签： javascript laravel vue.js timer vuejs2

【解决方案1】：

我可以为您提供一个模拟您的用例的解决方案，方法是定义一个从数据库中获取数据的方法（在我的例子中是一个提供当前日期和时间的在线 API）并在 created 挂钩中调用该方法，并且通过利用setInterval 函数，我们可以每秒获取数据。

运行这段代码sn-p，希望对你有帮助：

new Vue({
  el: '#app',
  data() {
    return {
      now: 0
    };
  },
  created: function() {

    this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    setInterval(() => {
      this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    }, 1000);
  },

  methods: {

    fetchTemp(uri) {

      axios.get(uri).then((res) => {
        this.now = new Date(res.data.fulldate).toLocaleString();


      }).catch(err => {});
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h1> Now : {{now}} </h1>
  </div>
</body>

</html>

【讨论】：