Laravel / Vue.js-计时器
[英]Laravel/Vue.js - Timer
问题描述
我想寻求帮助。 我下载了这个项目以学习如何使用Vue.js ： https : Vue.js
我想每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 个解决方案
解决方案1
0 已采纳 2018-11-14 20:17:55
我可以为您提供一个模拟您的用例的解决方案，方法是定义一种从数据库中获取数据的方法（在本例中为提供当前日期和时间的在线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>
Vue.js 在 Laravel
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.