I have a php page person.php that includes 2 vueJs ponents: person-details.vue and phones.vue. Each of these ponents include the same third ponent notify-delete. This notify-delete ponent includes a bootstrap modal dialog to confirm a deletion action of the parent ponent (person or phone). I use props to set a message in the modal confirmation dialog and $refs to show it.

Problem: When this props is set the msg props from the ponent person and the dialog is shown, the message is correctly set. However when I set from the phones ponent, the dialog shows the message set by person. as if person is constantly overriding the value of the msg props.

here is a sample of the code:

person.php:

<person-details details="<?= json_encode($person) ?>"></person-details>
<phones details="<?= json_encode($phones) ?>"></phones>

Person-details.vue:

<template>
    <notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" @confirmed="deleteMe"></notify-delete>
    <button type="button" @click="confirmDelete">Delete this person</button>
</template>

<script>
    export default {
        data () {
            return {
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete() {
                this.deleteMsg = 'Are you sure you want to delete this person?'
                this.$refs.modalDeletePerson.show()
            },
            deleteMe() {
                // delete person
            }
        }
    }
</script>
</template>

Phones.vue:

<template>
    <notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" @confirmed="deleteMe($event)"></notify-delete>

    <button type="button" @click="confirmDelete">Delete this phone</button>
</template>

<script>
    export default {
        data () {
            return {
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete() {
                this.deleteMsg = 'Are you sure you want to delete this phone?'
                this.$refs.modalDeletePhone.show()
            },
            deleteMe() {
                // delete phone
            }
        }
    }
</script>

Notify-delete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    {{msg}}
                </div>
                <div class="modal-footer">
                    <button type="submit" data-dismiss="modal" @click="confirm">Delete</button>
                    <button type="button" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['entity', 'msg'],

        methods: {
            show() {
                $('#modalDelete').modal('show')
            },

            confirm() {
                this.$emit('confirmed')
            }
        }
    }
</script>

Any idea how I can have two distinguish instances of the same ponent?

I have a php page person.php that includes 2 vueJs ponents: person-details.vue and phones.vue. Each of these ponents include the same third ponent notify-delete. This notify-delete ponent includes a bootstrap modal dialog to confirm a deletion action of the parent ponent (person or phone). I use props to set a message in the modal confirmation dialog and $refs to show it.

Problem: When this props is set the msg props from the ponent person and the dialog is shown, the message is correctly set. However when I set from the phones ponent, the dialog shows the message set by person. as if person is constantly overriding the value of the msg props.

here is a sample of the code:

person.php:

<person-details details="<?= json_encode($person) ?>"></person-details>
<phones details="<?= json_encode($phones) ?>"></phones>

Person-details.vue:

<template>
    <notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" @confirmed="deleteMe"></notify-delete>
    <button type="button" @click="confirmDelete">Delete this person</button>
</template>

<script>
    export default {
        data () {
            return {
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete() {
                this.deleteMsg = 'Are you sure you want to delete this person?'
                this.$refs.modalDeletePerson.show()
            },
            deleteMe() {
                // delete person
            }
        }
    }
</script>
</template>

Phones.vue:

<template>
    <notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" @confirmed="deleteMe($event)"></notify-delete>

    <button type="button" @click="confirmDelete">Delete this phone</button>
</template>

<script>
    export default {
        data () {
            return {
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete() {
                this.deleteMsg = 'Are you sure you want to delete this phone?'
                this.$refs.modalDeletePhone.show()
            },
            deleteMe() {
                // delete phone
            }
        }
    }
</script>

Notify-delete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    {{msg}}
                </div>
                <div class="modal-footer">
                    <button type="submit" data-dismiss="modal" @click="confirm">Delete</button>
                    <button type="button" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['entity', 'msg'],

        methods: {
            show() {
                $('#modalDelete').modal('show')
            },

            confirm() {
                this.$emit('confirmed')
            }
        }
    }
</script>

Any idea how I can have two distinguish instances of the same ponent?

• javascript
• vue.js

Share Improve this question Follow edited Apr 11, 2017 at 18:29 Warrio asked Apr 11, 2017 at 18:11 WarrioWarrio 1,91355 gold badges2929 silver badges4646 bronze badges 2

• Do you have a typo in Person-details.vue in the template, as you have written it here? – Bert Commented Apr 11, 2017 at 18:24
• Yes, there was an extra paste. Thank you. I edited it. – Warrio Commented Apr 11, 2017 at 18:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is here

show() {
    $('#modalDelete').modal('show')
}

You are rendering two modals with the same id, then using jQuery to show them. Specifically, $('#modalDelete') will contain two elements. I expect the modal method just picks the first one and shows it.

Try

<div ref="modal" class="modal fade" tabindex="-1" role="dialog">

and

show() {
    $(this.$refs.modal).modal('show')
}

This should give each instance of the Notify-delete.vue ponent it's own reference.