removing an item from an array in Vuex

Question

I am just starting using Vuex but am having a problem (and this could be some clueless syntax error on my part). I have a user with liked_items and have a network call that is to unlike an item.

mutations: {
SET_TOGGLE_LIKED: (state, { global_id }) => {
  alert('here is global_id: ' + global_id)
 state.user.liked_items.find((obj,i) => {
   if(obj.global_id === global_id){ // no global_id
      console.log('that exists at i: ' + i + ' with length: ' + state.user.liked_items.length)
      state.user.liked_items.splice(i, 1)
      console.log('that exists at i: ' + state.user.liked_items.length)
   }else{
     console.log('that doesnot exist!')
   }
 })
}

The problem I'm having is that after removing an item from the liked_items list, that seems to get recalled and I get an error that global_id does not exist on undefined.

I am able to fix by having:

 state.user.liked_items.find((obj,i) => {
   if(obj){
     if(obj.global_id === global_id){

but why do I need to check for the existence of obj here?

CloudBranch · Accepted Answer · 2019-11-28 06:52:29Z

16

We can also use map to get the index of the object in a store array and remove it using:

Mutation

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => {
    const i = state.someArrayofObjects.map(item => item.id).indexOf(payload.id);
    state.someArrayofObjects.splice(i, 1);
  }

Here, the id is the id passed with the payload to the MUTATION, we can also pass only the id as the whole payload. In that case, we can do something like:

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => {
    const i = state.someArrayofObjects.map(item => item.id).indexOf(payload);
    state.someArrayofObjects.splice(i, 1);
  }

edited Nov 28, 2019 at 6:52

CloudBranch

1,6143 gold badges20 silver badges24 bronze badges

answered Mar 5, 2019 at 13:37

Rakibul Haq

1,39625 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fabian von Ellerts Over a year ago

Thanks, but why not use findIndex(item => item.id === payload)?

Eric Azimi Over a year ago

Thank you very much. why doesn't this work with the filter?

Salah Eddine Bentayeb Over a year ago

Thank you for this answer, we should add a condition to check if the index exists to avoid deleting all items like this if (i != -1) { state.someArrayofObjects.splice(removeIndex, 1); }

Don M Over a year ago

This doesn't answer the question: why do I need to check for the existence of obj here?

M.A. Heshmat Khah Over a year ago

you are looking for the index of the object in order to delete it and you are not check for existence of the object.

acdcjunior · Accepted Answer · 2018-04-10 23:36:07Z

2

If you have undefined as elements of the liked_items array, you'll get obj as undefined sometimes.

You could simplify your if as below, though:

 state.user.liked_items.find((obj,i) => {
   if(obj && obj.global_id === global_id){

Or could pre-filter the array to keep only non-undefined values:

 state.user.liked_items.filter(o => o).find((obj,i) => {
   if(obj.global_id === global_id){

answered Apr 10, 2018 at 23:36

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Comments

Anand Singh · Accepted Answer · 2020-02-20 13:49:44Z

-2

You can use the following mutation, it uses the splice from Javascript array methods.

deleteElement: function(state.element) {
  state.myArray.splice(this.events.indexOf(element), 1);
}

If you know the index of the element, it becomes (obviously):

deleteElement: function(state,elementIndex) {
  state.myArray.splice(elementIndex, 1);
}

"1" is the number of elements to remove, starting from elementIndex

edited Feb 20, 2020 at 13:49

answered Feb 20, 2020 at 12:33

Anand Singh

1,29515 silver badges23 bronze badges

1 Comment

Don M Over a year ago

The question is why do I need to check for the existence of obj here?

Collectives™ on Stack Overflow

removing an item from an array in Vuex

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related