How to append second page data of infinte scroll in ionic vue

Issue

I using infinite scroll to append list first page data gets append nicely but from the second page it is not appending however it is fetching second page correctly

html

  <ion-list>
        <ion-item v-for="(right_hand_man, index) in right_hand_men" :key="index" style="--color: #272727;margin-left: 5px;margin-right: 5px">
          <ion-label text-wrap @click="() => router.push(`/staff/${right_hand_man.id}/right_hand_man`)">{{ right_hand_man.name }}</ion-label><!--{{ right_hand_man.id }}-->
          <ion-text slot="end" @click="remove(right_hand_man.id)" color="danger" style="font-size: 2vh;"><ion-icon style="color:#ed3e17;font-size: 3vh;" :icon="trashOutline" /></ion-text><!-- Remove -->
          <!--<ion-text slot="end" @click="() => router.push(`/staff/${right_hand_man.id}/right_hand_man`)" color="warning" >Detalles</ion-text>--><!-- View -->
        </ion-item>
      </ion-list>
      <ion-infinite-scroll
        @ionInfinite="getRightHandMen($event)"
        threshold="100px"
        id="infinite-scroll"
        :disabled="isDisabled"
      >
        <ion-infinite-scroll-content
          loading-spinner="bubbles"
          loading-text="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

script

<script>
import {
  IonPage,
  ionText,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonItem,
  IonList,
  IonLabel,
  IonInfiniteScroll,
  IonInfiniteScrollContent,
} from "@ionic/vue";
import ApiService from "@/services/api.service";
import { TokenService } from "@/services/token.service";
import { useRouter } from "vue-router";
import { trashOutline } from "ionicons/icons";

export default {
  name: "Tab3",
  data() {
    return {
      right_hand_men: "",
      trashOutline,
      getRightHandMen_url:`/api/gangBoss/get-boss-rhm/${TokenService.getUserInfo().id}`,
      isDisabled:false,

    };
  },
  components: {
    IonHeader,
    ionText,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonItem,
    IonList,
    IonLabel,
    IonInfiniteScroll,
  IonInfiniteScrollContent,
  },
  methods: {
    remove(rhm_id) {
      ApiService.post(`api/gangBoss/remove-rhm`, { rhm: rhm_id }).then(
        async () => {
          await this.getRightHandMen();
        }
      );
    },
    getRightHandMen: function () {
 const infiniteScroll = document.getElementById('infinite-scroll');

      return ApiService.get(this.getRightHandMen_url).then(
        (response) => {
          console.log(response.data.data)
          this.getRightHandMen_url = response.data.next_page_url;
          this.right_hand_men = response.data.data;
          if(infiniteScroll != null)
         infiniteScroll.complete()
        }
      );
    },
  },
  setup() {
    const router = useRouter();
    return { router };
  },
  created() {
    this.getRightHandMen();
  },
  ionViewWillEnter() {
    this.getRightHandMen();
  },
};
</script>

Solution

It looks like the issue may be your reference to the ion-infinite-scroll possibly being null, and thus complete() is not called.

The example from the docs for ion-infinite-scroll show the element reference is accessed through the event target instead of querying the DOM.

Your template is already passing the event to the getRightHandMen method:

<ion-infinite-scroll @ionInfinite="getRightHandMen($event)">

...but your method isn't using it. You can simply update your method to use it. However, there are a few calls to the method outside of the event, where you don't have any event data, so you have to add a truthy check on the event, or use optional chaining:

export default {
  methods: {
    getRightHandMen: function (event) {
      const infiniteScroll = event?.target;

      return ApiService.get(this.getRightHandMen_url).then(
        (response) => {
          //...

          infiniteScroll?.complete()
        }
      );
    }
  }
}

Answered By - tony19