I’m trying to implement the infinite scroll using quasar. Here’s my code:

<template>
  <q-page padding>
    <q-tab-panels>
    <!-- Some tag about panels -->
      <q-tab-panel name="...">
        <q-infinite-scroll
          @load="fetchMoreData"
          :disable="!hasMoreData"
          :offset="10"
          :debounce="1500"
        >
          <MyCard
            v-for="(data, index) in datas"
            :weeklyEvaluation="datas"
            :key="index"
          />
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
        </q-infinite-scroll>
      </q-tab-panel>
    </q-tab-panels>
  <q-page padding>
</template>
<script setup>
// import ...
const datas = ref([
  // ...
])

async function fetchMoreData() {
  const newDatas = await fetch();
  datas.value = [
    ...datas.value,
    newDatas
  ]
}
</script>

What I expected was that the fetchMoreData function would only be called when I scrolled down the list of data. However, contrary to what I expected, the fetchMoreData function was called every 2 seconds and only stopped when it loaded all the data in the database. If you guys see the problem I’m having or need more information, please reply to me soon.