Calling component methods (ionic 5 + vue.js 3)

I’m trying to call the modal component methods but I got no luck with that.
Here is my code:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start" @click="openModel()">
          {{ t('Open Modal') }}
        </ion-buttons>
        <ion-title> {{ t('OrderNo') }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-modal
      css-class="orderItem-modal"
      @onDidDismiss="closeOrderItemModal()"
      ref="orderItemModal">
      <OrderItemModal :data="data"></OrderItemModal>
    </ion-modal>

  </ion-page>
</template>

<script lang="ts">
import { 
  IonPage, 
  IonHeader, 
  IonToolbar, 
  IonButtons,
  IonModal,
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';

import OrderItemModal from '@/components/orderItemModal.vue';

export default defineComponent({
  name: 'Order',
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonButtons,
    IonModal,
    OrderItemModal
  }
  data: function() {
    const { t } = useI18n();

    return {
      t
    }
  }
  methods: {
    openModel: function(){
      this.$refs.orderItemModal.dismiss();  //-> dismiss got a red errror (Property 'dismiss' does not exist on type 'unknown'.Vetur(2339))
    }
  }
});
</script>

I have tried:

this.$refs.orderItemModal.$el.dismiss();

But also $el: Property ‘$el’ does not exist on type ‘unknown’

So why the ref: orderItemModal is unknown?!

Ionic Info

Ionic:
   Ionic CLI       : 6.12.2 (/home/khaledomara/.nvm/versions/node/v14.13.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.4.4

Capacitor:
   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:
   cordova-res : 0.15.2
   native-run  : 1.2.2

System:
   NodeJS : v14.13.0 (/home/khaledomara/.nvm/versions/node/v14.13.0/bin/node)
   npm    : 6.14.8
   OS     : Linux 5.4

1 post - 1 participant

Read full topic