Closed
Description
I initialized a new project using ionic CLI and then copied the IonRefesher example code and ran it but it seems the event is not triggered.
When I pull down, the loading spinner appears, but after 2 seconds it doesn't automatically hidden but keeps spinning.
The desired result should be: log 123 and hidden loading
Here is Page.vue
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Pull to Refresh</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<p>Pull this content down to trigger the refresh.</p>
</ion-content>
</ion-page>
<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
const handleRefresh = (event: CustomEvent) => {
console.log('123')
setTimeout(() => {
// Any calls to load data go here
event.target.complete();
}, 2000);
};
</script>
My package.json:
"dependencies": {
"@capacitor/app": "7.0.0",
"@capacitor/core": "7.0.1",
"@capacitor/haptics": "7.0.0",
"@capacitor/keyboard": "7.0.0",
"@capacitor/status-bar": "7.0.0",
"@ionic/vue": "^8.0.0",
"@ionic/vue-router": "^8.0.0",
"ionicons": "^7.0.0",
"vue": "^3.3.0",
"vue-router": "^4.2.0"
},
"devDependencies": {
"@capacitor/cli": "7.0.1",
"@vitejs/plugin-legacy": "^5.0.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.3.0",
"cypress": "^13.5.0",
"eslint": "^8.35.0",
"eslint-plugin-vue": "^9.9.0",
"jsdom": "^22.1.0",
"terser": "^5.4.0",
"typescript": "~5.6.2",
"vite": "~5.2.0",
"vitest": "^0.34.6",
"vue-tsc": "^2.1.10"
}