I manage my values with Vuex. I want to delete a given value in the events array and I tried to delete the value using indexOf and splice, but it deletes another value on the screen. On the server side, the value is deleted successfully, so reloading the server returns the correct value.
Is there a mistake in the value specified for indexOf and splice? I'd like to know what caused this and how to fix it.
＃ Code
Array Data
// 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"
・
・
・
・
store
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)
・
・
・
・
})
},
}
** components**
// 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)
},
}
Array.prototype.indexOf() looks up an array element by its value using strict equality. This only works with primitive values.
Since state.events[] contains an array of objects (not primitive), indexOf() returns -1 because the non-primitive cannot be found. Passing a -1 index to Array.prototype.splice() removes the last element, leading to the behavior you observed.
To lookup an object in the array, use Array.prototype.findIndex() with a callback that compares its argument's id property (or some other unique identifier) to that in the payload:
const index = state.events.findIndex(event => payload.id === event.id)
if (index > -1) {
state.events.splice(index, 1)
}