Ionic Vue使用ion-refresher遇EventTarget无complete属性错误求助

这个问题是TypeScript的类型检查导致的——默认情况下event.target被推断为通用的EventTarget类型，而它并没有complete()方法。你可以通过以下两种方式解决：

方法一：类型断言为IonRefresher #

直接把事件目标断言成IonRefresher类型，让TypeScript识别它的方法：

<template>
  <ion-refresher @ionRefresh="handleRefresh">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</template>

<script setup lang="ts">
import { IonRefresher, IonRefresherContent } from '@ionic/vue';

const handleRefresh = (event: CustomEvent) => {
  // 断言为IonRefresher类型
  const refresher = event.target as IonRefresher;
  
  // 模拟数据请求等异步操作
  setTimeout(() => {
    refresher.complete();
  }, 2000);
};
</script>

方法二：使用事件的detail属性 #

Ionic的ionRefresh事件返回的CustomEvent中，detail字段直接包含了refresher实例，无需额外断言：

<template>
  <ion-refresher @ionRefresh="handleRefresh">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</template>

<script setup lang="ts">
import { IonRefresher, IonRefresherContent } from '@ionic/vue';

const handleRefresh = (event: CustomEvent) => {
  setTimeout(() => {
    event.detail.complete();
  }, 2000);
};
</script>

官方文档示例针对的是JavaScript项目，没有TypeScript的类型校验，所以直接使用event.target.complete()不会报错。在TypeScript环境下，必须明确类型才能通过校验。

内容的提问来源于stack exchange，提问作者Moisés Guzmán