Cannot get Vue Typescript to recognize `closeOpened()` on IonItemSliding to close it

I’ve tried everything I can think of and I can’t get Ionic 7 Vue to programmatically close the IonItemSliding slider.

I tried:

    const entityTypeSlider = ref({} as InstanceType<typeof IonItemSliding>);


await entityTypeSlider.value.closeOpened();

fails to compile with This expression is not callable. Type 'never' has no call signatures.

My hacky workaround is to force a rerender by assigning re-render :key but would love to know how do actually use the component methods in Vue Typescript.

An actual code example would make it easier for someone to help you

hi! I am trying to call: Slide Buttons | Slide Right to Left with ion-item-sliding

in context like this:

  <ion-item-sliding ref="slidingItem">
      <ion-label>Some Label Text</ion-label>
    <ion-item-options side="end">
      <ion-item-option color="secondary" @click="handleFixClick"> Fix </ion-item-option>

<script lang="ts">
import { ref } from 'vue'
import { IonItemSliding } from '@ionic/vue';

export default {
  setup() {
    const slidingItem = ref<IonItemSliding | null>(null);
    const handleFixClick = () => {

    return {

But Typescript complains closeOpened is not callable. It seems that IonSliding does not have a correct Vue Typescript interface or I am calling it the wrong way.

you need to get the element

1 Like