再次关于事件删除项的重复
Posted
技术标签:
【中文标题】再次关于事件删除项的重复【英文标题】：again about duplications of the event deleting item 【发布时间】：2019-10-21 16:44:14 【问题描述】：我在这里问I have event duplication after action was moved in store object 关于事件的重复和提议的决定似乎不错，但是在我回到这个问题之后，我遇到了同样的问题 成功消息重复。 在我的容器 vue 文件 MainApp.vue 中，我设置了事件处理程序：
<template>
<body class="account-body">
<v-dialog/>
<MainHeader></MainHeader>
<div class="content p-0 m-0" style="width: 100% !important; margin: auto !important;">
<notifications group="wiznext_notification"/>
<router-view></router-view>
</div>
</body>
</template>
<script>
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
</script>
我用 click.prevent 调用确认对话框：
<div class="card-footer">
<div class="float-right">
<i :class="'mr-2 '+getHeaderIcon('delete')" @click.prevent="confirmDeleteUserList( nextUserList.id, currentLoggedUser.id,
nextUserList.title, index );" title="Delete"></i>
</div>
我的混合资源/js/appMixin.js 中的方法被触发，如果用户选择确认 dialog_confirmed 事件被触发：
confirmMsg: function (question, paramsArray, title, bus)
this.$modal.show('dialog',
title: title,
text: question,
buttons: [
title: 'Yes',
default: true, // Will be triggered by default if 'Enter' pressed.
handler: () =>
bus.$emit('dialog_confirmed', paramsArray);
this.$modal.hide('dialog')
,
title: '', // Button title
handler: () =>
// Button click handler
,
title: 'Cancel'
]
)
,
在我的商店资源/js/store.js OI中定义了删除项目和触发事件的方法：
userListDelete(context, paramsArray )
axios(
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 (response.data.id == this.getters.userLists[I].id)
this.getters.userLists.splice(this.getters.userLists.indexOf(this.getters.userLists[I]), 1)
context.commit('refreshUserLists', this.getters.userLists);
break;
bus.$emit( 'onUserListDeleteSuccess', response );
).catch((error) =>
bus.$emit('onUserListDeleteFailure', error);
);
, // userListDelete(context, paramsArray )
在删除项目的 list.vue 文件中，我定义了弹出消息：
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.$setLaravelValidationErrorsFromResponse(error.message);
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()
我在所有页面的挂载事件中显示消息，我看到 MainApp.vue 的挂载事件仅触发一次，当打开其他页面时我 在控制台中查看相关消息。 谷歌搜索我找到了 bus.$off 方法，但它对我没有帮助，反正我有几条重复的消息，特别是如果我在不同的页面之间。
如何修复这些重复的消息？
谢谢！
【问题讨论】：
【参考方案1】：我在以下位置找到了决定： Stop receiving events from destroyed child component
所以创建/删除像
这样的事件created()
...
bus.$on('onUserListDeleteSuccess', (response) =>
this.is_page_updating = false
this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
)
, // created()
beforeDestroy()
bus.$off( 'onUserListDeleteSuccess' )
,
对我来说没问题！
【讨论】：
以上是关于再次关于事件删除项的重复的主要内容，如果未能解决你的问题，请参考以下文章
如何在android中获取主屏幕小部件列表项的点击事件[重复]