Administro mis valores con Vuex. Quiero eliminar un valor dado en la matriz de eventos e intenté eliminar el valor usando indexOf y splice, pero elimina otro valor en la pantalla. En el lado del servidor, el valor se elimina correctamente, por lo que volver a cargar el servidor devuelve el valor correcto.
¿Hay un error en el valor especificado para indexOf y splice? Quisiera saber a qué se debe esto y cómo solucionarlo.
＃ Código
Datos de matriz
// 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"・・・・Tienda
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)・・・・}) }, }** componentes**
// 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() busca un elemento de matriz por su valor usando igualdad estricta . Esto solo funciona convalores primitivos .
Dado que state.events[] contiene una matriz de objetos (no primitivos), indexOf() devuelve -1 porque no se puede encontrar el no primitivo. Pasar un índice -1 a Array.prototype.splice() elimina el último elemento, lo que lleva al comportamiento que observaste.
Para buscar un objeto en la matriz, use Array.prototype.findIndex() con una devolución de llamada que compare la propiedad id de su argumento (o algún otro identificador único) con la de la carga útil:
const index = state.events.findIndex(event => payload.id === event.id) if (index > -1) { state.events.splice(index, 1) }