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

Ionic Framework Ionic Vue
1

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>);

but

await entityTypeSlider.value.closeOpened();

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

2

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.

3

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

4

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

in context like this:

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

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

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

    return {
      slidingItem,
      handleFixClick,
    };
  }
};
</script>

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.

5

you need to get the element

slidingItem.value.$el.closeOpened()
1 Like