Vuejs2 vue无限加载不';t检测结束并执行加载

Vuejs2 vue无限加载不';t检测结束并执行加载,vuejs2,vue-infinite-loading,Vuejs2,Vue Infinite Loading,在vue应用程序中使用vue无限加载组件时出现问题 当我打开可折叠组件时,它将运行vue无限加载&在第一次加载后不滚动,它也将再次运行vue无限加载,尝试使用changin距离和使用强制使用无限包装,但结果仍然相同。有什么帮助吗 以下是我的示例代码: <template> <div v-if="stateAnalyticsData.length" class="table-responsive tbl-analytics-res

在vue应用程序中使用vue无限加载组件时出现问题

  • 当我打开可折叠组件时,它将运行vue无限加载&在第一次加载后不滚动,它也将再次运行vue无限加载,尝试使用changin距离和使用强制使用无限包装,但结果仍然相同。有什么帮助吗
  • 以下是我的示例代码:

    <template>
      <div
        v-if="stateAnalyticsData.length"
        class="table-responsive tbl-analytics-results accordion"
        role="tablist"
      >
        <table
          **v-for="(data, keys) in stateAnalyticsData"
          :key="keys"**
          class="table table-borderless"
        >
          <tbody
            v-if="
              showOverDueLeadBrokers ? data.value.totalOverdueLeadsCount > 0 : true
            "
          >
            <b-card no-body class="mt-0">
              <tr>
                <td class="td-wide pl-0">
                  <div class="h-details" role="tab">
                    <!-- more info  -->
                    <more-info-caret
                      v-b-toggle="`accordion-${data.key}`"
                      :more-infor-load="{ id: data.key }"
                      flag="analytics"
                    />
                    <!-- <span
                      v-if="loadingItemIds.includes(data.key)"
                      class="spinner-border spinner-border-sm"
                    /> -->
                    <div class="name-details d-flex align-items-center">
                      <p class="mb-0 analytic-state">
                        Analytics of State:
                      </p>
                      <h5 class="broker-name ml-2 mb-0">
                        {{ data.key }}
                      </h5>
                    </div>
                  </div>
                </td>
                <td>
                  {{ data.value.averageResponseTime | durationFilter }}
                  <i class="mdi mdi-information" />
                </td>
              </tr>
            </b-card>
    
            <!-- more info collapse  -->
            **<b-collapse
              :id="'accordion-' + data.key"
              accordion="my-accordion"
              role="tabpanel"
              infinite-wrapper
            >**
              **<tr v-for="sub in result" :key="sub.id">**
                <b-card
                  v-if="
                    (!showOverDueLeadBrokers && sub.state === data.key) ||
                      (showOverDueLeadBrokers &&
                        sub.state === data.key &&
                        sub.totalOverdueLeadsCount > 0)
                  "
                  class="mt-0"
                  @click="goToBLeadFunc(sub.id)"
                >
                  
                  <td>
                    {{ sub.averageResponseTime | durationFilter }}
                    <i class="mdi mdi-information" />
                  </td>
                </b-card>
              </tr>
              **<div style="overflow: auto;">
                <infinite-loading
                  v-if="infiniteId && infiniteId === data.key"
                  :id="data.key"
                  ref="infiniteLoading"
                  spinner="circles"
                  :identifier="infiniteId"
                  force-use-infinite-wrapper="true"
                  @infinite="
                    infiniteHandler($event, {
                      key: data.key,
                      brokersCount: data.value.brokersCount
                    })
                  "
                />
              </div>**
            </b-collapse>
          </tbody>
        </table>
      </div>
    </template>
    
    
    
    

    国家分析:

    {{data.key}} {{data.value.averagerResponseTime | durationFilter} **** **** {{sub.averagerResponseTime | durationFilter} ** **
    如果你能回答以上任何一个问题,那就太好了