Reactivity not working within an IonModal component

Ionic Framework Ionic Vue
1

I am encountering an issue where reactivity is not working within a custom Vue component that wraps an IonModal. Changing a boolean variable doesn’t cause a reactive update to the contents of the modal even though you can see the variable changing in a console.log.

I am wondering if I am doing something wrong, if it’s not suppose to work within an IonModal or if this is a weird bug.

Here is a starter project replicating the issue with both the Options API and the Composition API along with code without a modal that works as expected.

If you open the console and click the Toggle button, you’ll see showText is changing but the contents in the modal is not.

UPDATE

I just tried IonModal with the showText bool moved to my Vuex store and using state in the template also doesn’t work (it isn’t reactive when the state is updated).

<IonModal>
    <div>
        <template v-if="!$store.state.showText">
            <!-- some stuff -->
        </template>
        <template v-else>
            <!-- some other stuff -->
        </template>
    </div>
</IonModal>
2

I tried a few things, but not sure why it’s not working. If someone from Ionic doesn’t reply soon, I’d post it as a bug.

To get around it, I would switch the way you’re presenting your modal. Take a look at how this page is opening a modal with the modalController in the @ionic/vue package, where the content is another page/component:

Good luck!

3

Thanks for looking at it! I’ll try using the modalController in the test repo. It crossed my mind but I try to avoid using it :sweat_smile:

4

I’ve added an example using a modalController using a passed in prop to toggle the text. It seems to work if the prop value is updated. I hacked it together with a setInterval and a setTimeout to toggle the prop for testing :laughing:

This doesn’t seem to be a viable option as I don’t think there is a way to pass data from ModalControllerComponent back to ModalController. I could fire an event in ModalControllerComponent but there is no way to listen for it in ModalController. I guess I could use a value in my Vuex store to share between the two but then all the logic isn’t self contained and is becoming messy.

5

@ldebeasi do you have any thoughts on this? Do you think it is a bug? If so, I’ll go ahead and create an issue in GitHub. For now, I’ve come up with a workaround with multiple modals for each scenario being shown or hidden with v-if.

6

Can you file an issue on our GitHub repo with a sample app I can clone to reproduce the issue?

7

Absolutely! Here it is. Thanks!