vue.jsionic-frameworkvuejs3ionic5pull-to-refresh

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


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


Solution

  • 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.