Call methods from onIonViewDidEnter

Ionic Framework Ionic Vue
1

How do I call methods defined under methods like below

methods: {
   myMethodToCall(){
   }
}

from onIonViewDidEnter() which is inside setup()? because if I did

setup () {
    onIonViewDidEnter(() => {
      this.myMethodToCall()
    });
}

it will just return the error

Property ‘getWasiat’ does not exist on type ‘void’

Because my situation is, I have 2 page. First page is to list things I downloaded from my API, and the 2nd page is to add data to my backend. After I added some data on the 2nd page, I use router to go back to my 1st page using

this.router.push

The problem is the data I added on the 2nd page is not being displayed in the 1st page, unless I refresh the page to redownload the data from my API. So instead of asking user to manually refresh the page, I want to make it automatically redownload from my API.

2

Great to see another Vue user :slight_smile: I would say in most cases you don’t want to mix the Options API and Composition API in the same Vue component. I don’t believe this exists within setup.

If you are sticking with the Options API, use ionViewDidEnter.

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

  export default defineComponent({
    methods: {
      myMethodToCall() {
        console.log('Hello')
      }
    },
    ionViewDidEnter(): void {
      this.myMethodCall()
    }
  });
</script>

To answer you second question about data not being displayed on your 1st page that was added from the 2nd, you need to use state. https://pinia.vuejs.org is a good choice.

3

Thanks for your reply. Actually I wasn’t aware I was using Composition API lol. Vue was just my part-time thing, and the last time I used Vue was version 2.0 and I only know about Options API. Nevertheless I’ve read quite a lot about Composition API and it seems to be more powerful than Options API. I have migrated a portion of my page to fully using Composition API now, thanks!

On another note, yes sadly it seems there’re not too many Ionic Vue user. I started Ionic with angular but oh God how I really hate angular because of the sooo many files I have to deal with for each page. So naturally I was very excited with Vue support in Ionic.

1 Like
4

Yeah, I have only ever used Vue. I made that decision many moons ago when Vue had an easier learning curve. When I started my Ionic app, I started with the Options API and said I would never use the Composition API. However, I use TypeScript and the Composition API plays better with it. I have since fallen in love with the Composition API with script setup as there is less boilerplate required (like no need to declare each component being used in the components prop).

I am slowly converting all my components over to the Composition API. I do it one by one as I am touching them for a feature change/addition.