Laravel / Vue.js - Таймер - PullRequest
Новая
       1

Laravel / Vue.js - Таймер

0 голосов
/ 14 ноября 2018

Я хотел бы попросить о помощи. Я скачал этот проект, чтобы узнать, как использовать 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);
  },

1 Ответ

0 голосов
/ 14 ноября 2018

Я мог бы предоставить вам решение, которое имитирует ваш вариант использования, определив метод для извлечения данных из базы данных (в моем случае онлайн-API, который предоставляет текущую дату и время) и вызовите этот метод в created ловушке, иИспользуя функцию setInterval, мы можем получать данные каждую секунду.

Запустите этот фрагмент кода, который, я надеюсь, может вам помочь: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...