DEV Community

Discussion on: Ionic Modal In Vue JS, Managing Events

Collapse
davids89 profile image
David

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

Collapse
aaronksaunders profile image
Aaron K Saunders Author • Edited on

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...

Collapse
suzannevangelder profile image
Suzanne-van-Gelder

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.

Thread Thread
aaronksaunders profile image
Aaron K Saunders Author

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

Thread Thread
suzannevangelder profile image
Suzanne-van-Gelder

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

Thread Thread
aaronksaunders profile image
Aaron K Saunders Author

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

Thread Thread
suzannevangelder profile image
Suzanne-van-Gelder

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

Thread Thread
aaronksaunders profile image
Aaron K Saunders Author
    <simple-modal
      :title="data"
      @modalSave="handleSave"
      @modalCancel="handleCancel">
    </simple-modal>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
suzannevangelder profile image
Suzanne-van-Gelder

Thank you, it's working now.

Thread Thread
aaronksaunders profile image
Aaron K Saunders Author

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