Question

我的应用中有一个日历类型页面，必须计算当天到期的约会。这项操作每天只需要大约35毫秒，但是当您查看一个月时，它会累积起来。目前，当我循环浏览我的日期时，在所有日期都已加载之前不会呈现任何内容。

我想我会尝试用一个更简单的例子来测试：

<span v-for="n in 100000000">{{ n }} </span>

即使做这么简单的事情，跨度也不会渲染，直到它经历了所有1亿次迭代。

我怎样才能让它渲染1然后2，然后3等，而不是在它完成循环时渲染？

编辑：这是我的真实世界的例子：

<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来自外部循环。这是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
  }

Answer 1

你可以使用这样的指令来试试这个：

<outer-loop v-for="(item, index) in myArray"  v-getDates="index">

    <planner-day v-for="date in myDates"></<planner-day>

</outer-loop>

在组件脚本中

        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);

        }
    }
}

循环将向myDates[ ]数组添加项目。由于myDates[ ]在数据选项中初始化，因此它是被动的，您可以遍历它。

以下是example fiddle.

如何在每次循环迭代后获取一个组件，而不是等到循环结束？

1 个答案: