Question

我有一个php页面person.php，其中包含2个vueJs组件：person-details.vue和phones.vue。这些组件中的每一个都包括相同的第三组件notify-delete。此notify-delete组件包含一个引导模式对话框，用于确认父组件（人员或电话）的删除操作。我使用props在模态确认对话框中设置了一条消息，并使用$refs来显示该消息。

问题：当此props设置msg组件中的person道具并显示对话框时，将正确设置该消息。但是，当我从phones组件设置时，对话框显示由person设置的消息。好像person一直在覆盖msg道具的价值。

以下是代码示例：

person.php ：

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

与人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>

通知-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>

知道如何让两个区分相同组件的实例吗？

Answer 1

问题出在这里

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

您正在渲染具有相同ID的两个模态，然后使用jQuery来显示它们。具体来说，$('#modalDelete')将包含两个元素。我希望modal方法只选择第一个并显示它。

尝试

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

和

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

这应该为Notify-delete.vue组件的每个实例提供它自己的参考。

如何对同一个vueJs组件使用多个引用？

1 个答案: