В моем laravel 5.8 / vue 2.5.17 / vuex ^ 3.1.0 у меня есть проблема, что при открытом диалоге у меня есть дублирование событий.
У меня есть событие для удаления элемента:
В моем файле Vue:
...
mounted() {
bus.$on('dialog_confirmed', (paramsArray) => {
if (paramsArray.key == this.deleteFromUserListsKey(paramsArray.user_list_id)) {
this.runDeleteFromUserLists(paramsArray.user_list_id, paramsArray.index);
}
})
bus.$on('onUserListDeleteSuccess', (response) => {
this.is_page_updating = false
this.showPopupMessage("User lists", 'User\'s list was successfully deleted!', 'success');
})
bus.$on('onUserListDeleteFailure', (error) => {
this.$setLaravelValidationErrorsFromResponse(error.message);
this.is_page_updating = false
this.showRunTimeError(error, this);
this.showPopupMessage("User lists", 'Error adding user\'s list !', 'error');
})
}, // mounted() {
methods: {
confirmDeleteUserList(user_list_id, user_list_title, index) {
this.confirmMsg("Do you want to exclude '" + user_list_title + "' user list ?", {
key: this.deleteFromUserListsKey(user_list_id), user_list_id: user_list_id, index: index
}, 'Confirm', bus);
}, //confirmDeleteUserList(id, user_list_title, index) {
deleteFromUserListsKey(user_list_id) {
return 'user_list__remove_' + user_list_id;
},
runDeleteFromUserLists(user_list_id, index) {
this.$store.dispatch('userListDelete', { logged_user_id : this.currentLoggedUser.id, user_list_id : user_list_id } );
}, // runDeleteFromUserLists() {
и в ресурсах / js / store.js:
state : {
...
userLists: [],
...
actions : {
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 ) {
Подтверждение Msg (на основе https://github.com/euvl/vue-js-modal) определено в моем микшировании:
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'
}
]
})
},
все работало нормально, пока я не переместил метод userListDelete из моего файла vue в store.js.
В результате 1-й элемент события удаляется нормально, вторая ошибка повышения элемента, что элемент не найден, и я не знаю, событие удвоено ...
Как это исправить?
ОБНОВЛЕННЫЙ БЛОК:
Я все еще ищу правильное решение:
Я загрузил демо на:
http://178.128.145.48/login
demo@demo.com wdemo
http://178.128.145.48/websites-blogs будет открыто.
Пожалуйста, попробуйте зайти в «Списки пользователей» по ссылке в левом верхнем меню https://prnt.sc/nq4qiy
и обратно несколько раз. Когда на странице «Списки пользователей» я пытаюсь удалить 1 список пользователей, он удаляется, но я получил несколько сообщений
и URL в разделе «сеть» моего браузера: https://imgur.com/a/4ubFB0g
Похоже, события дублируются. И похоже, что при перемещении между страницами количество гупликаций увеличивается.
Почему и как это исправить?
Я использую @ click.prevent при запуске события, чтобы показать сообщение подтверждения удаления.
Для добавления дополнительных демонстрационных рядов есть «Добавить демонстрационные данные».
Спасибо!