Modal Return Values

[ShrimpFriedCode]

Currently, there doesn't seem to be any support for returning values on modal close. It would be very useful if you could pass an argument to closeModal() that could visible to an object defined as: const modal= await openModal(...., and accessed after close as modal.closeValue. Even better would be providing a way to view data within the modal in the parent's onclose() method, so that you could conditionally allow closing the modal based on data within the modal itself.

[Jenesius]

Interesting idea. Sometimes ago i do something like this:

const modal = openModal(SomeVueComponent, {
  close: async (values) => {
    const data = await API.request(values);
    ...and then update my parent component
  }
})

And in the modal

{
  props: {
    close: Function
  },
  data: () => ({userName: null}),
  async beforeModalClose(){
     await this.close(userName);
     return true;
  }
}

But I doubt this solution will work for everyone.

---

Also, You are right when you say that there is no access to the modal data in the onclose method. I will try to resolve this Issue. Maybe by adding field target that was a link to modal instance.

const modal = await openModal({data: () => ({
  userName: null
})})
modal.onclose = () => modal.target.userName

But maybe i will find more better solution

---

I will spend to it some time and then write in this discussion my result.
Thnx for making this library better!

[acrolink]

But I doubt this solution will work for everyone.

It worked for me for now. But I hope it will be possible in near future to emit events from the modal to the parent (along with passing arguments from modal to parent). I have tried to do that but failed.

[Jenesius]

@acrolink , What do u think about next solution:

const modal = await openModal();
modal.on('update', (position) => {...})

This is not currently implemented but i can add it in library.

---

The default vue events, like:

  <modal @update = "onUpdate" @clean = "cleanForm"/>

Not availible because we don't have the access to modal component inside our templates. (All modals are deep inside ModalContainer)

---

Thnx for make this library better!

[acrolink]

@Jenesius

Yes, that would be a great improvement for this library. Worth to mention that the above solution suggested by you works only using normal Vue.js 2 <script> tag. It did not work with the new <script setup> tag.

Thank you.

[Jenesius]

@Jenesius

Yes, that would be a great improvement for this library. Worth to mention that the above solution suggested by you works only using normal Vue.js 2 <script> tag. It did not work with the new <script setup> tag.

Thank you.

Hi, in 1.5.0 u can use emit in the modal and handle it in the parent( more info in readmy https://github.com/Jenesius/vue-modal#handle-events)
Can u provide example what don't work with script setup.
I don't know about what type error we tell

[acrolink]

@Jenesius Thank you very much. Works fine.

[Jenesius]

Also, we can use something like it:

//Modal.vue
{
  props: {
    val: String
  },
  data: () => ({
    insideValue: 123
  })
}

const m = await openModal(Modal, {val: "qwerty"});
m.onclose = function(){ //working only with function, not onclose = () => {...
    console.log("This:", this); // this is instance of VueModalComponent
    console.log(this.val); // "qwerty"
    console.log(this.insideValue); // 123
}

I will put information about it in docs

[Jenesius]

I update only github version
Maybe better to use(and rename to) modal.el than modal.target...
Or modal.instance
All variants:

const modal = await openModal(Modal)

modal.el
modal.elem
modal.target 
modal.inst
modal.instance // Current
modal.getInstance()

[ShrimpFriedCode]

I believe modal.instance makes the most sense here. modal.el / elem implies the return of DOM elements, and modal.target might be a bit confusing as target is typically used to deal with event targets via user interaction. In addition, in my opinion, accessing via the property rather than modal.getInstance() makes things a bit more clean and consistent

[Jenesius]

I update version of package. 1.4.7
For more information: docs
I add instance prop to ModalObject:

const modal = await openModal(Modal);
modal.instance

Also update information about onclose function and access to modal instance:

//Modal.vue
{
    props: {},
    data: () => {
        return {
            insideValue: "Hello"
        }
    }
}

const modal = await openModal(Modal);
modal.onclose = function(){
    this.insideValue; // "Hello"
    modal.instance.insideValue; // "Hello"
}

---

How to pass values to onclose function i dont resolve, because you can execute closeModal in any point in your application, so in one place, for example in he modal, u can pass some values to closeModal, but in other component u dont have access to modal's values and in result you will execute closeModal without paramters.
This way will create a lot of if constructions.

---

Result:

• Access to modal instance, by modal.instance
• Access to modal instance, by this in onclose = function () {...}
• Try to pass callback like props in Modal:

const fn = () => doSome;
const modal = await openModal(Modal, {callback: fn})
***
And execute this function in beforeModalClose or onBeforeModalClose

[ShrimpFriedCode]

I greatly appreciate you taking the time to investigate this feature! Accessing via this.someValue in onclose works perfectly and is exactly what I needed for confirmation dialogs. Passing values to the closeModal function isn't super necessary when you can access the data directly in the modal in the onlcose function. In my opinion, being able to access data directly in the modal via the onlcose function is far more useful anyway. As you've stated there are difficulties in implementing a system to pass values to the closeModal function, I'd say it probably isn't worth implementing considering the greater data access you have inside the onclose now.