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 stackoverflow.com/questions/58068751/vue-js-modal-close-event — Jazuly
– Jazuly, Commented Apr 22, 2020 at 4: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
– Daniel Tate, Commented Apr 22, 2020 at 5:37

Daniel Tate · Accepted Answer · 2020-04-22 04:58:28Z

1

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)
        }
    }
}

answered Apr 22, 2020 at 4:58

Daniel Tate

2,1634 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related