I created a Pokemon App where users can add Pokemon to their 'pokedex'. The app takes a pokemon object from this.$store.state.pokemon and adds it to this.$store.state.pokedex. However, users can add the same pokemon multiple times to the pokedex, causing issues when trying to delete objects using .splice(index, 1). Currently, this method deletes the last item in the array, not the intended item. Is there a way to pass the key of the object to splice?
//Pokedex.vue
<template>
<pokedex-card
v-for="(pokemon, i) in pokedex"
:key="`${i}+${pokemon.id}`"
:pokemon="pokemon">
<button @click="releasePokemon(i)">Release {{ pokemon.name }} ?</button>
</pokedex-card>
</template>
methods:{
releasePokemon(id){
this.$store.dispatch('releasePokemon', id)
}
And the vuex store:
//index.js
REMOVE_FROM_POKEDEX(state, id){
//find pokemon position in array by matching it's object ID
var pokePosition = state.pokedex.map(pokemon => { return pokemon.id }).indexOf(id)
state.pokedex.splice(pokePosition, 1);
}