Using vue-js-modal how do I pass data back up to the parent component

Question

https://github.com/euvl/vue-js-modal#readme

I have searched through the docs and can't find an example that fits my needs. I have also searched through stack overflow without finding an example that matches mine.

I am strictly asking about the interactions between the parent and modal component here. You can assume all of my imports are correct. I have omitted some code for brevity ( for example the template is redundant on Component A ). You can assume open is being triggered via a click handler.

I have a component: A

{
    data() {
        return {
            data: ''
        }
    },
    methods: {
        open() {
            this.$modal.show(ComponentB, { data: this.data }, {}, { 'before-close': update })
        },
        update(e) {
            // e = event
            // this.data is not changed
        }
    }
}

Component B

<template>
    <div>
        <input v-model="$attrs.data" />
        <button @click="$emit('close')">close</button>
    </div>
</tempate>

As you can see Component A passes its data prop into the ComponentB via vue-js-modal, the input is in turn is bound via v-model back to that attribute.

Why when I change this attribute does it not change on the parent component.

What is the correct way to pass data down and back up through the modal component.

Also. My requirement is to use dynamic modals in this style. NOT to use the template syntax with JSX.

try to add `@click.self` on your modal, reference https://stackoverflow.com/questions/58068751/vue-js-modal-close-event — Jazuly, Apr 22 '20 at 04:58
Thanks @Jazuly unfortunately that example doesn't match my use case, I will try and add details to my answer if it works. — Daniel Tate, Apr 22 '20 at 05:37

score 1 · Accepted Answer · answered Apr 22 '20 at 04:58

I got around this by passing in a function that does the assignment into the Modal, This is probably not best practice but it works.

{
    data() {
        return {
            data: ''
        }
    },
    methods: {
        open() {
            this.$modal.show(ComponentB, { update: this.update }, {}, {})
        },
        update(data) {
            this.data = data
        }
    }
}

Component B

<template>
    <div>
        <input v-model="data" @change="update" />
        <button @click="$emit('close')">close</button>
    </div>
</tempate>

export default {
    data() {
        {
            data: ''
        }
    },
    methods: {
        update() {
            this.$attrs.update(this.data)
        }
    }
}

Using vue-js-modal how do I pass data back up to the parent component

1 Answers1