从API获取的数据包含两种类型的元素:cycles
,其是具有很少属性的对象;以及last_update
对象,其包含ID和last_update: <date>
。
我用以下方式处理它们:
<script>
export default {
data: () => ({
jsonData: [],
lastUpdate: '',
items: [
{
action: 'mdi-calendar',
active: false,
items: [{ title: '' }],
title: 'Last Update',
}
]
}),
methods: {
async parseData() {
const response = await fetch("http://127.0.0.1:5012/api/v3/cycles", {
headers: {
"Content-Type": "application/json",
"mode": "cors"
}
})
let cycles = await response.json();
if (cycles.length < 1) {
console.error("Couldn't fetch cycles from DB...")
}
const last_update = cycles.filter(cycle => cycle.last_update);
this.lastUpdate = last_update[0].last_update;
console.log('Inside parseData:', this.lastUpdate);
cycles = cycles.map(({source, revision, elements}) => ({source, revision, elements}));
this.jsonData = cycles
},
setLastUpdate() {
this.items[0].items.title = this.lastUpdate;
console.log('Inside setLastUpdate:', this.items[0].items.title);
console.log('Inside setLastUpdate:', this.lastUpdate);
}
},
created() {
this.parseData();
this.setLastUpdate();
}
}
</script>
现在,控制台显示以下输出:
Inside setLastUpdate: <empty string>
Inside setLastUpdate: <empty string>
Inside parseData: 2023.01.24 08:44:32
值被读取并更新data
节中的lastUpdate
。为什么setLastUpdate()
函数无法读取它?
我想可能是async设置的问题,所以我做了setLastUpdate()
函数async只是为了测试,但是parseData()
函数中的异步动作只是指从API中取数据,数据到了之后,所有的处理都发生在同一组数据上,无论是阅读cycles
还是读取last_update
。
如何重构代码以使lastUpdate
可用于setLastUpdate()
函数并可能更新data.items
对象?
1条答案
按热度按时间jmo0nnb31#
通过查看控制台语句,函数
setLastUpdate
在parseData
函数之前调用。因此,要使lastUpdate
属性可用于setLastUpdate
,您需要异步调用这些函数。您可以创建一个单独的异步函数,它将逐个调用这两个函数,并等待第一个函数执行。例如-还有一件事-
而不是-
应该是-
因为内部项具有对象数组结构。