[英]How do I get a component to render after each loop iteration rather than waiting until the loop has finished?
I have a calendar type page in my app which has to calculate the appointments due on that day. 我的应用程序中有一个日历类型页面,该页面必须计算当天的约会。 This operation only takes about 35ms per day but when you're looking at a month, it adds up. 每天仅需要大约35毫秒执行此操作,但是当您查看一个月时,它会累加起来。 Currently, as I am looping through my dates, nothing is rendered until ALL the days have been loaded. 目前,当我循环查看日期时,直到加载了所有日期后才呈现任何内容。
I thought I'd try and get a simpler example to test with so: 我以为我会尝试得到一个更简单的示例进行测试:
<span v-for="n in 100000000">{{ n }} </span>
Even doing something as simple as this, the span won't render until it's been through all 100 million iterations. 即使执行这样简单的操作,跨度也不会渲染,直到经过所有1亿次迭代为止。
How can I get this to render 1 then 2, then 3 etc rather than rendering when it's completed the loop? 如何完成循环后先渲染1,然后2,然后3等而不是渲染?
Edit: This is my real world example: 编辑:这是我的现实世界示例:
<planner-day
v-for="date in getDates(index, index + selectedFilters.daysPerRow)"
v-if="plannerStartDate"
:date="date"
:timeDisplayType="selectedFilters.timeDisplayType"
:timeInterval="selectedFilters.timeInterval"
:jobs="items"
:filteredDateRange="selectedFilters.dateRange"
:jobDueDates="jobDueDates"
:roundJobCounts="roundJobCounts"
></planner-day>
index
above is from an outer loop. 上面的index
来自外部循环。 This is getDates()
: 这是getDates()
:
getDates (rowIndex) {
let rangeStart = parseInt(rowIndex) * parseInt(this.selectedFilters.daysPerRow)
let rangeEnd = rangeStart + parseInt(this.selectedFilters.daysPerRow)
let dates = []
let currentRow = 0
var currentDate = this.selectedFilters.dateRange.start.clone().subtract(1, 'days')
while (currentDate.add(1, 'days').diff(this.selectedFilters.dateRange.end) <= 0 && currentRow < rangeEnd) {
if (currentRow >= rangeStart) {
dates.push(currentDate.clone().startOf('day'))
}
currentRow++
}
return dates
}
You can try this using a directive like this: 您可以使用如下指令来尝试:
<outer-loop v-for="(item, index) in myArray" v-getDates="index">
<planner-day v-for="date in myDates"></<planner-day>
</outer-loop>
In the component script 在组件脚本中
data(){
return{
myDates:[]
};
},
directive:{
getDates: {
bind(el, binding, Vnode){
var vm = Vnode.context;
var index = binding.value;
let rangeStart = parseInt(index) * parseInt(vm.selectedFilters.daysPerRow)
let rangeEnd = rangeStart + parseInt(vm.selectedFilters.daysPerRow)
let currentRow = 0
var currentDate = vm.selectedFilters.dateRange.start.clone().subtract(1, 'days')
var myLoop = function(i){
if (i >= rangeStart) {
vm.myDates.push(currentDate.clone().startOf('day'));
}
if(currentDate.add(1, 'days').diff(vm.selectedFilters.dateRange.end) <= 0 && i < rangeEnd){
i++;
myLoop(i);
}
}
myLoop(currentRow);
}
}
}
The loop will be adding items to myDates[ ]
array. 该循环将向myDates[ ]
数组添加项目。 Since myDates[ ]
is initialized in data option it is reactive and you can loop through it. 由于myDates[ ]
是在data选项中初始化的,因此它是反应性的,您可以遍历它。
Here is the example fiddle. 这是小提琴的例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.