Я управляю своими ценностями с помощью Vuex. Я хочу удалить заданное значение в массиве событий, и я попытался удалить значение с помощью indexOf и splice, но это удаляет другое значение на экране. На стороне сервера значение успешно удаляется, поэтому перезагрузка сервера возвращает правильное значение.
Есть ли ошибка в значении, указанном для indexOf и splice? Я хотел бы знать, что вызвало это и как это исправить.
# Код
Данные массива
// I want to delete a specified value from an array containing a large amount of data.
[0 … 99]
[100 … 199]
[200 … 250]
0:
color: "#2196F3"
end: 1649116800000
id: 7
long_time: true
name: ""
post_id: null
start: 1649115900000
timed: true
updated_at: "2022-04-05T08:44:01.049+09:00"
・
・
・
・
хранить
export const state = () => ({
events: [],
})
export const mutations = {
deleteEvent(state, payload) {
state.events.splice(state.events.indexOf(payload), 1)
},
}
export const actions = {
deleteEvent ({ rootState, commit }, event) {
this.$axios.$delete(`${url.SCHEDULE_API}/${event.id}`)
.then(() => {
commit('deleteEvent', event)
・
・
・
・
})
},
}
** компоненты**
// selectedEvent
{
color: (...)
created_at: (...)
end: (...)
id: (...)
long_term_id: (...)
long_time: (...)
name: (...)
post_id: (...)
start: (...)
timed: (...)
updated_at: (...)
}
methods: {
deleteEvent (event) {
this.selectedOpen = false
this.$store.dispatch('schedule/deleteEvent', this.selectedEvent)
},
}
@kissu deleteEvent
отправляет данные для удаления на сервер. Затем indexOf
и splice
используются для удаления тех же данных в deleteEvent
в mutation
. Значения кажутся удаленными из самого заднего значения в массиве.
Array.prototype.indexOf()
ищет элемент массива по его значению, используя строгое равенство. Это работает только с примитивные значения.
Поскольку state.events[]
содержит массив объектов (не примитивных), indexOf()
возвращает -1
, поскольку не может быть найден не примитивный. Передача индекса -1
в Array.prototype.splice()
удаляет последний элемент, что приводит к поведению, которое вы наблюдали.
Чтобы найти объект в массиве, используйте Array.prototype.findIndex()
с обратным вызовом, который сравнивает свойство id
своего аргумента (или какой-либо другой уникальный идентификатор) со значением в полезной нагрузке:
const index = state.events.findIndex(event => payload.id === event.id)
if (index > -1) {
state.events.splice(index, 1)
}
Что именно делает
deleteEvent
? Вероятно, вы делаете внутренний вызов, чтобы удалить его, а затем получаете с ним обновленные данные (удаляя их один раз). Затем выsplice
это удаляете второй элемент. Похоже на самое простое объяснение. В противном случае проверьте инструменты разработки Vue до и после вызова метода. То же самое касается бэкенда.