Vue.js -等待初始页面渲染-然后进行计算
Vue.js -等待初始页面渲染-然后进行计算
提问于 2019-03-14 18:48:30
在Nuxt.js项目中，我有一个页面，在这个页面中，我需要先进行一些客户端计算，然后才能在表中显示一些数据。在计算之前和计算过程中，我想显示一个加载屏幕。
一些背景:数据是农民使用的地块。这张表格应该显示过去几年在一块土地上种植的作物。数据在数据库中的存储方式如下：
plots = [{
name: 'Plot1',
year: 2017,
crop: 'Wheat'
...
}, {
name: 'Plot1',
year: 2018,
crop: 'Maize',
...
} ...]在一个方法中，该数据被转换为以下结构的嵌套对象
data = {
'Plot1': {
2017: {
'crop': 'Wheat',
'catchCrop': true
},
2018: {
'crop': 'Maize',
'catchCrop': false
}
}
...
}并随后显示在表格组件中。
该组件的模型如下所示：
<template>
<loadingComponent v-if="loading"/>
<tableComponent v-else-if="!loading && dataAvailable"/>
<span v-else >No data</span>
</template>
<script>
data() {
return {
loading: true,
dataAvailable: false
}
},
mounted() {
this.startCalculation()
},
methods: {
startCalculation() {
if (store.data) {
// long running calculation, then
this.dataAvailable = true
}
this.loading = false
}
}
</script>我面临的问题是加载组件从来没有显示出来。但是，startCalculation方法会阻塞用户界面(如果显示了加载组件就可以了)，并且只有在计算完成后才会更新组件。
有谁知道我怎么才能绕过这一关吗？提前谢谢你！
编辑:在摆弄之后，我可以通过将setTimeout设置为1ms来让它以我想要的方式工作。这样，加载指示器被显示，数据被正确处理，然后在计算完成后，加载指示器被成功移除。然而，这感觉像是一个非常肮脏的黑客行为，我希望避免它……
mounted() {
this.loading = true
// set short timeout in order for Vue to render the loading bar
setTimeout(() => {
this.startCalculation()
this.loading = false
},1)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55160572
复制相关文章
相似问题