DEV Community

Ionic Modal In Vue JS, Managing Events

Aaron K Saunders on March 21, 2020

This post is kinda old, there is a full example on using IonModal Here No TS Ionic Vue Example If you have issues let me know. - The Ionic Comp...

Read full post

David • Jan 21 '21

It is possible to bind props with a new modal instance?

Aaron K Saunders • Jan 21 '21 • Edited

not sure I understand the question?

Also, I don't create modals this way anymore, I use the template approach, I find it to be much cleaner

Take a look here: github.com/aaronksaunders/ionic-vu...

Suzanne-van-Gelder • Mar 5 '21

I think David means data: { name: "Why Data" } in Detail.vue does not bind to the props in SimpleModal.vue. The default values are used in the Modal.

I have the same problem and get the warning:
[Vue warn]: Extraneous non-props attributes (data) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

I tried to figure it out myself, but am a little bit stuck by now.

Aaron K Saunders • Mar 7 '21

have you looked at the updated code sample referenced above? This post is over a year old and ionic has changed how they manage modals. If you have a code sample project somewhere I am happy to take a look

Suzanne-van-Gelder • Mar 8 '21

Yes, I have cloned the project with updated code from github.com/aaronksaunders/ionic-vu....

I have changed
data: {
name: "Why Data"
}
into
data: {
title: "Why Data"
}
but both do not show "Why Data" in the title of the modal, but "Super Modal" instead.

I run Ionic Framework : @ionic/vue 5.5.2 with vue@3.0.4

Aaron K Saunders • Mar 8 '21

to change the title of the modal, you need to set the modals title property, you are changing the data property which has no impact on the modal

Suzanne-van-Gelder • Mar 8 '21

I think you mean:
props: {
title: { type: String, default: "Super Modal" }
},
But how do I change this using parameters from detail.vue?

Aaron K Saunders • Mar 8 '21

    <simple-modal
      :title="data"
      @modalSave="handleSave"
      @modalCancel="handleCancel">
    </simple-modal>

Suzanne-van-Gelder • Mar 8 '21

Thank you, it's working now.

Aaron K Saunders • Mar 8 '21

Thanks, please like and subscribe to my YouTube channel, trying to get my subscribers over 2000!! And you will get updated when I push new content

ideasdelaboratorio • May 13 '20

How can it be adapted to be able to call the modal from any other component?
Thanks

Aaron K Saunders • May 14 '20

i dont this that is how component based frameworks are meant to work. You should put the contents of the modal in a separate component that can be utilized on different locations in your app

ideasdelaboratorio • May 14 '20

Thanks. I meant the modal component to avoid the import in every component it's called. The content of the modal differs if arrive from one button or link.
Vuejs Event bus can be used in ionic?

Aaron K Saunders • May 14 '20

yes Ionic just provides web components, all the regular vue stuff is still there

visibly • Apr 2 '20

Thanks for the example. Have you succeeded to add swipeToClose to modals?
I'm having issues getting this to work, but I don't know if it's even supported in the Ionic Vue beta?

For reference this is my method for opening the modal (which works perfectly fine - except for the swipeToClose):

openTaskDrawer(task) { return this.modal = this.$ionic.modalController .create({ component: TaskDrawer, presentingElement: this.$el, swipeToClose: true, componentProps: { propsData: { task: task } }, }) .then(m => m.present()) }

Aaron K Saunders • Mar 22 '20

tryed to make a video, but jacked up the sound... here it is for now until i get a chance to redo the video track youtu.be/nEkJWKSXcDM