How to programatically close ion-sliding-item?

I have a component below which renders information for each element in the list:

<template>
  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="danger">
        <ion-icon :icon="trashOutline" slot="icon-only"></ion-icon>
      </ion-item-option>
    </ion-item-options>
    <ion-item lines="full" color="secondary">
      <ion-icon
        :src="require(`@/static/icons/categories.svg`)"
        slot="start"
      ></ion-icon>
      <ion-label>{{ category.name }}</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option @click="editCategory(category.id)">
        <ion-icon :icon="create" slot="icon-only"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</template>

<script>
  import { useRouter } from 'vue-router'
  import { trashOutline, create } from 'ionicons/icons'
  export default {
    name: 'CategoryListItem',
    props: {
      category: {
        type: Object,
        required: true,
      },
    },
    setup() {
      const router = useRouter()

      const editCategory = async (categoryId) => {
        await router.push(`/categories/edit/${categoryId}`)
      }

      return {
        trashOutline,
        create,
        editCategory,
      }
    },
  }
</script>

In this component I have ion-item-sliding component rendering the information. The ion-label inside the ion-item-sliding has option of Delete to the left and the option of Edit to the right. Now, what I would like to do is reset or close the ion-item-sliding element with the close() function after the Edit or Delete function is pressed. I tried to close it with ref, but I was unsuccessful (ref pointing to the ion-item-sliding component). Request anyone to please help me in closing the ion-item-sliding programatically after I have routed ahead to the edit page in editCategory function.

4 posts - 2 participants

Read full topic