4 months ago

About duplications of the event deleting item

Posted 4 months ago by mstdmstd

Hello, I asked here about of duplications of the event and the proposed decision seemed good, but after I returned to this question I have the same problems with success message duplications. In my container vue file MainApp.vue I set event handler:

   <body class="account-body">

   <div class="content p-0 m-0" style="width: 100% !important; margin: auto !important;">
      <notifications group="wiznext_notification"/>



    import {bus} from '../../app';
    import MainHeader from './MainHeader.vue';
    import { deleteFromUserListsKey, runDeleteFromUserLists } from "../../helpers/commonFuncs";

    export default {
        name: 'main-app',
        components: {MainHeader},
        created() {
            // console.log('resources/js/components/Horizontal/MainApp.vue Component created.')
        mounted() {
            console.log('resources/js/components/Horizontal/MainApp.vue Component MOUNTED.')
            bus.$on('dialog_confirmed', (paramsArray) => {
                // alert( "resources/js/components/Horizontal/MainApp.vue dialog_confirmed  paramsArray::"+var_dump(paramsArray) )
                if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) {
                    this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.user_id, paramsArray.index);

        methods: {
            deleteFromUserListsKey, runDeleteFromUserLists



I call confirmation dialog with click.prevent :

<div class="card-footer">
   <div class="float-right">
      <i :class="'mr-2 '+getHeaderIcon('delete')" @click.prevent="confirmDeleteUserList(,,
      nextUserList.title, index );" title="Delete"></i>

method from my mixing resources/js/appMixin.js is triggered and if user selects confirm dialog_confirmed event is emitted:

confirmMsg: function (question, paramsArray, title, bus) {
    this.$'dialog', {
        title: title,
        text: question,
        buttons: [
                title: 'Yes',
                default: true,    // Will be triggered by default if 'Enter' pressed.
                handler: () => {
                    bus.$emit('dialog_confirmed', paramsArray);
                title: '',       // Button title
                handler: () => {
                } // Button click handler
                title: 'Cancel'

In my store resources/js/store.js OI define method for item deleting and triggering events:

userListDelete(context, paramsArray ) {
        method: ( 'delete' ),
        url: this.getters.apiUrl + '/personal/user-lists/' + paramsArray.user_list_id,
    }).then((response) => {
        let L = this.getters.userLists.length
        for (var I = 0; I < L; I++) {
            if ( == this.getters.userLists[I].id) {
                this.getters.userLists.splice(this.getters.userLists.indexOf(this.getters.userLists[I]), 1)
                context.commit('refreshUserLists', this.getters.userLists);

        bus.$emit( 'onUserListDeleteSuccess', response );
    }).catch((error) => {
        bus.$emit('onUserListDeleteFailure', error);

}, // userListDelete(context, paramsArray ) { 

In list.vue file from which items are deleted I define popup messages:

mounted() {
    console.log("resources/js/components/Horizontal/personal/userLists.vue Mounted()::")
    bus.$on('onUserListDeleteSuccess', (response) => {
        this.is_page_updating = false
        this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
        // bus.$off('onUserListDeleteSuccess')

    bus.$on('onUserListDeleteFailure', (error) => {
        this.is_page_updating = false

        if (error.error_code != 11) {
            this.showRunTimeError(error, this);
            this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error');
        // bus.$off('onUserListDeleteFailure')
    this.is_page_loaded = true
    this.setAppTitle("Personal", 'User\'s lists', bus);
}, // mounted() {

I show messages in mount event of all pages and I see that mount event of MainApp.vue is triggered only once and when other page is opened I see relative message in console. Googling I found bus.$off method, but it does not help me, anyway I have several duplicated messages, especially if I between different pages.

How to fix these duplicated messages?

That could be viewed online [email protected] wdemo will be opened. Please, try to go to “User's lists” by link at top left menu and back several times. When on “User's lists” page I try to delete 1 user list it is deleted, but I got several messages and url in “network” section of my browser : Looks like events are duplicated.

There is “ Add Demo Data” to add more demo rows.


Please sign in or create an account to participate in this conversation.