функция сплайсинга не работает должным образом в массиве из 1 элемента

Question

В моем приложении Laravel 5 / vuejs 2 / vuex я делаю удаление строки в БД и использую функцию сплайсинга для удаления элемента из массива следующим образом:

    axios({
        method: ( 'delete' ),
        url: this.getters.apiUrl + '/personal/hostel_bookmarks/' + this.getters.currentLoggedUser.id + "/" + relatedHostel.id,
    }).then((response) => {
        let L = this.getters.hostelBookmarks.length

        for (var I = 0; I < L; I++) {
            if (relatedHostel.id == this.getters.hostelBookmarks[I].hostel_id) {
                // this.getters.hostelBookmarks.splice(this.getters.hostelBookmarks.indexOf(this.getters.hostelBookmarks[I]), 1)                        
                this.getters.hostelBookmarks.splice(I, 1)
                context.commit('refreshHostelBookmarks', this.getters.hostelBookmarks);
                break;
            }
        }
        bus.$emit( 'onHostelBookmarkDeleteSuccess', response );
    }).catch((error) => {
        bus.$emit('onHostelBookmarkDeleteFailure', error);
    });

Это работает нормально, если this.getters.hostelBookmarks имеет больше 1 элементов, но если он содержит только 1 элемент, то он не удаляется, а как ошибка в консоли js ...

Как исправить?

Answer 1

Это должно решить вашу проблему

let index = this.getters.hostelBookmarks.findIndex(item => { return item.hostel_id === relatedHostel.id })
if (index !== -1) {
  this.getters.hostelBookmarks.splice(index, 1)
  context.commit('refreshHostelBookmarks', this.getters.hostelBookmarks); 
}

Answer 2

Можете ли вы попробовать следующий код?

let L = this.getters.hostelBookmarks.length;

for (var I = L-1; I >= 0; I--) {
    if (relatedHostel.id == this.getters.hostelBookmarks[I].hostel_id) {
        this.getters.hostelBookmarks.splice(I, 1);
        context.commit('refreshHostelBookmarks', this.getters.hostelBookmarks);
        break;
    }
}

демонстрационный код для ++, -: Если у вас есть массив [1, 2, 3, 4, 5].И вы хотите удалить 2-й и 4-й элемент, 2 и 4.

Первый ++:

const origin = [1,2,3,4,5];
for(var i = 0; i < origin.length; i++){
    if(i === 1 || i === 3) {
        origin.splice(i, 1);
    }
}
console.log(origin); // [1, 3, 4]

Как видите, результат не тот, который вы ожидали.Если вы зарегистрируете каждый элемент в цикле, вы увидите, что индекс элемента был изменен после удаления элемента 2 .Когда я в цикле равен 3, фактически пятый элемент будет удален.

Тогда давайте посмотрим -:

const origin = [1,2,3,4,5];
for(var i = origin.length; i >= 0; i--){
    if(i === 3 || i === 1) {
        origin.splice(i, 1);
    }
}
console.log(origin); // [1, 3, 5]

Это то, что вы хотите.Когда - мы удалим элемент с последнего на первый.Индекс элемента не изменяется.