Ionic vue script setup props not being passed correctly

Ionic Framework Ionic Vue
1

Hi. I am using Ionic 6 Vue 3 with the composition api and script setup and so I am passing a prop to a view using

router.push({ name: ‘Component’, params: { uuid:id } })

inside the script setup in the component I have

const props = defineProps({
uuid: String,
});

The problem is that props.uuid does not change after the component has been initially mounted. For example I navigate to the page passing a value then I leave the page but when I return passing a different value props.uuid has not changed.

I also tried this same thing using the “standard” composition api syntax and I encountered the same issue.

btw my code worked fine before I added Ionic to the project. This would be a bug with Ionic, am I wrong?

2

well. I after a bit more digging I did find a workaround using router.params. glad to get it working but this is still a bug as far as I can tell.

edit. or is it? is it actually just that the props object is evaluated onMount and since ionic does not unmount the component then props is not being re-evaluated upon re-entry?

3

Component are being keeps, thats the ionic life cycle,
You can use life cycle event to clear thing out when the ionic/page are in hidden state

4

@allestaire is correct because Ionic doesn’t remount components between page transitions, you need to use Ionic’s lifecycle events.

This is what I do:

setup() {
    const route = useRoute()    

    onIonViewWillEnter(() => {
        const categoryParam = route.params.category as string

        // Do stuff
    })
}
1 Like