How to access Ionic Vue Lifecycle hooks in setup in Ionic Vue 5.5.2

Ionic Framework Ionic Vue
1

Hi,

Now that https://github.com/ionic-team/ionic-framework/issues/22440 is resolved, how can I access Ionic Lifecycle hooks in setup method? The official documentation does not have any concrete source for this…

Also, will I be able to use onMounted to frequently update the data with this update?

2

The “Lifecycle” docs have examples on how to use the Ionic lifecycle hooks: https://ionicframework.com/docs/vue/lifecycle

While we don’t have the exact syntax in the issue you linked, you should still be able to access setup data in these lifecycle hook methods.

3

Hi @ldebeasi
Thanks for the rapid reply. I tried to implement the way it is given in the documentation, I have written a component something like:

<template>
  <a-form>
    <a-form-item label="Name of the Category" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name" size="large" />
    </a-form-item>
    <a-form-item class="button-row">
      <a-button class="full-width" size="large" @click="onSubmit">
        Save Category
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import { reactive, toRaw, defineComponent } from 'vue'
  import { useForm } from '@ant-design-vue/use'
  import { toastController } from '@ionic/core'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'CreateCategoryForm',
    props: {
      editMode: {
        type: Boolean,
        required: true,
      },
      category: {
        type: Object,
        required: false,
        default: null,
      },
    },
    setup(props, { emit }) {
      const router = useRouter()
      const modelRef = reactive({ name: '' })
      const rulesRef = reactive({
        name: [
          {
            required: true,
            message: 'Please input the Name of the Expense Category',
          },
        ],
      })

      const { validate, validateInfos, resetFields } = useForm(
        modelRef,
        rulesRef,
      )

      const onSubmit = async (e) => {
        e.preventDefault()
        try {
          await validate()
          await emit('onSubmit', toRaw(modelRef))
          const toast = await toastController.create({
            message: `Category ${modelRef.name} successfully created!`,
            position: 'bottom',
            duration: 4000,
            buttons: [
              {
                text: 'Done',
                role: 'cancel',
              },
            ],
            animated: true,
            color: 'primary',
          })
          await toast.present()
          await router.push('/categories')
        } catch (err) {
          console.log(err)
        }
      }

      return {
        modelRef,
        validate,
        validateInfos,
        resetFields,
        onSubmit,
      }
    },
    ionViewDidEnter() {
      if (this.editMode) {
        debugger
        this.modelRef.name = this.category.name
      }
    },
    ionViewWillLeave() {
      this.resetFields()
    },
  })
</script>

<style scoped></style>

I the above example, I have debugger in the ionViewDidEnter function, but no matter what I do, navigate to the different route and come back, refresh the page, the debugger is not executed (meaning the function is not being called).

Please find below my ionic setup info for your reference:

Ionic:

   Ionic CLI       : 6.12.3 (/home/noopurp123/.nvm/versions/node/v12.19.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.2

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.19.1 (/home/noopurp123/.nvm/versions/node/v12.19.1/bin/node)
   npm    : 6.14.8
   OS     : Linux 5.4

Please let me know if I am missing something…

4

As per the docs, pages in your app need to be using the IonPage component in order for lifecycle methods to fire properly. The component template you posted does not have an IonPage component, so the lifecycle hooks will not fire.

5

@ldebeasi The parent component that renders this component is already wrapped in IonPage… Do I still have to add IonPage to this component as well?

6

In that case, you should not be using Ionic Lifecycle Hooks on the child component. Ionic Lifecycle Hooks should only be used on the parent view (I.e. a component with ion-page that is navigated to via the router).

If you are trying to determine when a child component rendered inside of a page is created, you can just use the Vue 3 lifecycle hooks.

7

@ldebeasi Okay, but even if I want to update the data frequently as soon as the child component is rendered, I cannot use something like onMounted in the child component because as written in the docs:

Ionic Framework treats navigation a bit differently. When you navigate to a new page, Ionic Framework will keep the old page in the existing DOM, but hide it from your view and transition the new page.

So, onMounted will be triggered initially to render the page, and then will never be called. How should I update the data in this case?

8

In that case, you should have the parent page call the update method on your child component in the ionViewDidEnter lifecycle hook.

1 Like
9

@ldebeasi Okay, thanks a lot for your assistance.

1 Like