javascript - Laravel/Vue.js - 计时器
问题描述
我想寻求帮助。我下载了这个项目来学习如何使用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);
},
解决方案
我可以为您提供一个模拟您的用例的解决方案,通过定义一个从数据库中获取数据的方法(在我的例子中是一个提供当前日期和时间的在线 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>
推荐阅读
- unity3d - 如何将 Unity 3d 与 BLED112 蓝牙 USB 加密狗连接?
- python - 是否有可以预测大多数纯数学函数的激活函数?
- bots - Telegram bot aiogram 错误
- javascript - 如何使用多维数组在 JavaScript 中创建具有多个输入的空白问题
- bash - 为什么在变量中添加字符串的顺序被交换
- r - 如何在R中放大scatter 3D的轴标记
- javascript - Highchart xAxis 和值未对齐
- java - 服务关闭时发送带缓冲区的请求
- c - 有人可以解释一下这个 C 语言代码吗?
- javascript - 为什么我需要单击两次才能在输入字段中生成一个值