ModalController [Vue]

Ionic Framework
1

It looks like the controller does not have access to Vue’s this context. I cant use this.$store , this.$route , this.$emit() and such even though the modal template itself is setup as a vue component… Understandably ionic-vue is in beta but any suggestions?

(The is no ionic-vue category so i used ionic)

2

just seeing this, I have done quite a bit with Vue, can you explain the problem abit more…

3

Hi Arron… I posted this issue after I managed to come up with a workaround. Going through your article gave me some insight. Are you on ionic slack? the ionic-vue channel there can do with people with your expertise :slight_smile:

4

send me a link… did not know about it… also have a bunch of content in my github repo and on youtube. @dlodeprojuicer

5

The magic trick I used to get this working is to pass “componentProps: { store: this.$store }” in the modalController create options.

You can also pass { parent: this } to have access to everything on the calling component. Or be more specific with { router: this.$router, store: this.$store }.

This doesn’t seem to be documented anywhere, so who knows if it will break in the future. componentProps appears to have been implemented to allow passing of ‘data’ but it currently doesn’t restrict passing other usual properties of a component in the above way.

Example:

const modal = await modalController
    .create({
        component: require('@/components/modals/MyModal.vue').default,
        componentProps: {
            store: this.$store,
            router: this.$router,
        },
    })
modal.present()
1 Like