Question

我有一个vue页面，我正在使用navigation-guard。这被用作其更新详细信息页面，所以我正在使用beforeRouteLeave，如果详细信息已更改，则显示我的警告modal，但这是我要在的地方卡住了如果我单击“忽略更改”按钮，则希望关闭modal并执行navigation，但是由于不断出现错误，我无法使其工作：

导航通过导航卫士从“ / myAccount / accountDetails”终止为“ / contactus”。

我尝试在$emit上使用click，但是当$on关闭时，我无法让component在modal中触发。< / p>

组件

beforeRouteLeave (to, from , next) {
    if (!this.detailsChanged) {
        next();
    } else {
        next(false);

        let data = {
            fromPage: 'PersonalDetailsPage',
            toPage: '/contactus',
            personalDetails: {
                name: this.pdName,
                comp_name: this.pdCompName,
                ddi: this.pdTelNo,
                ext: this.pdExtNo,
                mob: this.pdMobNo,
                email: this.pdEmailAdd
            }
        };
        
        VueEvent.$emit('show-details-not-saved-modal', data);
    }
}

整个模式代码

<template>
    <div class="modal fade danger-modal" id="detailsNotSavedModal" tabindex="-1" role="dialog" aria-labelledby="detailsNotSavedModal" aria-hidden="true"
            data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content danger-modal-content">
                <div class="modal-header danger-modal-headerfooter justify-content-start">
                    Updated details not saved
                </div>
                <div class="modal-body">
                    <p>The details have changed but have not been saved.</p>
                    <p>Are you sure you want to disregard the updated details?</p>
                    <p>Clicking 'Save details' will save the updated details.</p>
                    <p>Clicking 'Disregard changes' will disregard any updated details.</p>
                </div>
                <div class="modal-footer danger-modal-headerfooter">
                    <button ref="saveButton" class="btn btn-success" type="submit" data-dismiss="modal" @click="updateDetails">Save details</button>
                    <router-link :to="navigateTo" tag="button" class="btn btn-danger" data-dismiss="modal" @click="disregardDetails">Disregard changes</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "DetailsNotSavedModal",

    data() {
        return { 
             passedDetails: [],
             navigateTo: ''
        }
     },

    created() {
        VueEvent.$on('show-details-not-saved-modal', ( passedDetails ) => {
            this.passedDetails = passedDetails;

            console.log('passedDetails', passedDetails)

            this.navigateTo = this.passedDetails.toPage;

            $('#detailsNotSavedModal').modal('show').on('shown.bs.modal', this.focus);
        });
    },

    methods: {
        focus() {
            this.$refs.saveButton.focus();
        },

        updateDetails() {
            alert('Save clicked')
        },

        disregardDetails() {
            this.$emit('disregard_changes', { detailsChanged: false })

            // Also tried using a button and the below
            // this.$router.push(this.navigateTo);
        }
    }
}
</script>

如您所见，我emitting 'disregard_clicked' and I have tried the below everywhere in my 很着迷，但从未被调用。

VueEvent.$on('disregard_changes', ( data ) => {
    this.detailsChanged = data;
    console.log('0')
});

基本上，如果更改了详细信息，我需要停止navigation，如果单击“保存”，则显示我的modal。这将关闭modal并保存详细信息。如果他们单击“忽略”，则modal将关闭，用户应导航到所选的menu选项。

Answer 1

VueEvent.$on('disregard_changes', ...)，但是您的组件具有this.$emit('disregard_changes', ...)，它不会在VueEvent中的事件总线上发出事件。

解决方案：将this.$emit更改为VueEvent.$emit

导航卫士阻止我转到页面

1 个答案: