Skip to content
On this page

Return value from Modal

If we are talking about the return value of modal windows, we must first understand their essence. By default, modal windows are treated as a separate layer of logic with their own data model. This approach is convenient and makes developing a web application with modal windows safe. This library inherits this concept. A modal window is a separate logical level that accepts input parameters and somehow interacts with them. However, there are times when a modal window is just part of a process. I sometimes encounter such cases (although I try my best to avoid them). I will describe the solutions that I use in my projects. Starting with the most convenient, ending with those that I would not use:

Using PromptModal

In vanilla JS, there is a function prompt, which, upon closing the popup, will wrap the entered value. To implement such logic, let's write a wrapper for the modal window opening function:

File ModalCode.vue

<template>
  <button @click="handleClick">Click</button>
</template>
<script>
import {Modal} from "jenesius-vue-modal";

export default {
  methods: {
    handleClick() {
      // Current emit will close the modal and provided Meth.random() 
      // result to Promise returned by promptModal
      this.$emit(Modal.EVENT_PROMPT, Math.random());
    }
  }
}
</script>

How to use:

import {promptModal} from "jenesius-vue-modal"
const code = await promptModal(ModalCode);

What happened in this example:

  • promptModal return Promise, which will be executed when the modal window is closed. It will also be passed the value, which is inside the modal window component.
  • To describe the modal window, we implemented a simple input field that was concatenated with value (which is used as return value in the first step) This is the most elegant solution that I have found so far and often use in my projects.

Provide Handle

We can also pass a function to be called inside a modal window (Reminds me of the React component logic):

const modal = await openModal(Modal, {
  handleRequest: (value) => {
    // do something  
  }
})

And then in the modal:

<script>
  export default {
    props: {
      handleRequest: Function
    },
    beforeModalClose() {
      this.handleRequest("some-value")
    }
  }
</script>

Emit value and closing

// modal.vue
<template>
  <button @click = "$emit('return', false)">run</button>
</template>

And when we open modal:

const modal = await openModal(Modal)
modal.on('return', (value) => {
    console.log(value); // false
    modal.close()
})