Vue-js-modal: Passing data back from modal?

[ftrMorri]

Hi,

I'm having problems passing data back from a modal. With my use case, I couldn't find a suitable example in the documentation.

I'm using a custom .vue file which I show in the modal

<template>
    <div>
        <h1>This is modal</h1>
        <ul>
            <li v-for="item in items" :key="item.id" @click="select(item.id)">
                {{ item.id }}
            </li>
        </ul>
        <button @click="$emit('close')">Close</button>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "../../vue-ext";

@Component
export default class TestModal extends Vue {
    @Prop() items: any[];

    async select(id: any) {
        console.log(id)
    }
}

Vue.component("test-modal", TestModal);
</script>

Here's how I'm opening the modal

async openItemSelect() {
    this.$modal.show(TestModal, 
        {
            items: [{id: 1}, {id: 2}]
        },
        {},
        { 
            "before-close": (event: any) => { console.log("before close"); }
        });
}

But I can't figure out how to tell the parent component what item was selected. Is there an example for something like this?

[ricky11]

You can use regular props down, events up, there is no reason why this shouldn't work as well, as the modal is a regular component.

Are you using any state management, you can send data there and the parent can get it quite easily.

And ofcourse you have the before-open and close event, these are not triggered while hte modal is active, you can use events or state for that.

[euvl]

Very good answer, thanks @ricky11 👍