laravel - 如何显示数组中的刷新值
问题描述
我的问题在于显示对象的值。该表显示了任务和完成的剩余时间。但它并没有更新倒数计时器……值在Task ID中的一个Object中,例如:Object {1: "4017 D 13 H 2 M 49 S", 2: "0 D 0 H 0 M 0 S", ...} 该对象应始终更新以显示剩余时间,但在我显示对象的表中,相同的只是第一个值,而不更新计时器。
<template>
...
<table class="table" style="text-align: center">
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">Time Left</th>
</tr>
</thead>
<tbody>
<tr class="table-warning" v-for="task in tasks" :key="task.id">
<th scope="row">{{task.id}}</th>
<th>{{task.description}}</th>
<th>{{task.created_at}}</th>
<th>{{task.redline}}</th>
<th>{{showLeft[task.id]}}</th>
</tbody>
</table>
...
</template>
<script>
export default {
// variables declaration
data() {
return {
user: [],
tasks: [],
numTasks: "",
currentTime: [],
showLeft: {}
};
},
created() {
// ProgressBar animation starts
this.$Progress.start();
// Get data from server
axios.get("/user/name/data").then(response => {
this.user = response.data;
axios.get(`/user/missingTaskNum/data`).then(response => {
this.numTasks = response.data;
axios.get(`/user/missingTask/data`).then(response => {
this.tasks = response.data;
// Call function that will calculate time left
this.updateCurrentTime();
// ProgressBar animation stops
this.$Progress.finish();
});
});
});
},
mounted() {
// start timer to refresh function every 1 sec
this.interval = setInterval(() => {
this.updateCurrentTime();
}, 1000);
},
methods: {
updateCurrentTime: function() {
var now = new Date().getTime();
for (let i = 0; i < this.tasks.length; i++) {
this.currentTime[this.tasks[i].id] = new Date(this.tasks[i].redline) - now;
if (this.currentTime[this.tasks[i].id] < 0) {
this.$Progress.start();
this.$Progress.finish();
console.log("EXPIROU ID: " + this.tasks[i].id);
} else {
var days = Math.floor(
this.currentTime[this.tasks[i].id] / (1000 * 60 * 60 * 24)
);
var hours = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60)
);
var minutes = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60 * 60)) /
(1000 * 60)
);
var seconds = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60)) / 1000
);
this.showLeft[this.tasks[i].id] =
days + " D " + hours + " H " + minutes + " M " + seconds + " S ";
}
}
console.log(this.showLeft);
}
},
beforeDestroy() {
clearInterval(this.interval);
}
};
</script>
解决方案
您遇到了此处概述的变更检测警告之一:
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
特别是在这一行:
this.showLeft[this.tasks[i].id] =
days + " D " + hours + " H " + minutes + " M " + seconds + " S ";
该对象this.showLeft
在 内创建时为空data
,因此它不会有任何反应属性。如果您将其更改为以下内容,它可以正常工作:
this.$set(
this.showLeft,
this.tasks[i].id,
days + " D " + hours + " H " + minutes + " M " + seconds + " S "
)
这告诉 Vue 添加一个响应式属性到showLeft
,这样 UI 会在它改变时更新。
另一种方法是每次都创建一个新对象:
// Somewhere near the top of updateCurrentTime
const showLeft = {};
// ... set values on showLeft instead of this.showLeft
this.showLeft = showLeft
就我个人而言,我认为我会为此更多地使用计算属性,而不是尝试在updateCurrentTime
. 鉴于代码不完整,我不能更具体。
推荐阅读
- python - Django 酥脆的表格'form-inline'没有按预期工作
- javascript - 命令失败:“C:\xampp\htdocs\cordova-test\node_modules\.bin\webpack.cmd”
- performance - runInBoundThread 是最好的并行工具吗?
- memory - Rust - 为什么 malloc/alloc 和更多“惯用”方法之间的内存使用差异如此之大
- c++ - 初始化结构中的字符串类型元素
- c# - 如何有效地找到 System.Numerics.Vector 中的值索引
? - java - 如何在会话中存储jsp页面的onclick值?
- mysql - MySQL View 代替子查询不返回相同的结果
- html - 如何调整导航栏按钮的大小并使其适合屏幕宽度?
- vue.js - 单击后导航栏(移动视图)不关闭 - Vuejs