Property 'complete' does not exist on type 'EventTarget'

Question

In Ionic Vue, I am trying to use ion-refresher. According to the documentation, I should end with 'event.target.complete()' but this gives me the following error: Property 'complete' does not exist on type 'EventTarget'.

What should I do, that is what the official documentation tells me. Thank you.

https://ionicframework.com/docs/api/refresher

Answer 1

The complete() method is a method specific to the ion-refresher component in Ionic, so it will not be available on the EventTarget interface. To fix the error, you should make sure you are referencing the ion-refresher element correctly within your Vue component's template.

In your template, ensure you are using the correct event binding for the ionRefresh event, it should be like this:

<ion-refresher slot="fixed" @ionRefresh="onRefresh($event)">
</ion-refresher>

And in your script you should be able to do this:

methods: {
  onRefresh(event) {
    // perform your refresh logic here
    event.target.complete();
  }
}

event.target is the actual ion-refresher element in the DOM, and the complete() method is a method on that element that tells the ion-refresher to stop displaying the refreshing spinner.

Make sure that you have imported the ion-refresher component in your Vue file and also in your main.ts file for your Ionic Vue app.