How to update object in vuex store array?

Question

I'm pretty new to vue/vuex/vuetify but starting to get the hang of it. I have a problem though I haven't been able to solve properly.

I have an array of "projects" in my store. When deleting and adding items to the store via mutations the changes reflect properly in subcomponents referencing the array as a property.

However, changes to items in the array does not reflect even though I can see that the array in the store is updated.

The only way I got it to "work" with an update action was to either :

remove the project from the array in the store and then add it

use code that sort of does exactly the same as described above but like so:

state.categories = [
...state.categories.filter(element => element.id !== id),
category
]

But the problem with the above two methods is that the order of the array gets changed and I would really like to avoid that..

So basically, how would I rewrite my mutation method below to make the state reflect to subcomponents and keep the order of the array?

 updateProject(state, project) {

        var index = state.projects.findIndex(function (item, i) {
            return item.id === project.id;
        });

        state.projects[index] = project;
    }

ittus · Accepted Answer · 2019-04-22 01:25:03Z

3

You can use slice to inject edited project in correct position:

updateProject(state, project) {

  var index = state.projects.findIndex(function(item, i) {
    return item.id === project.id;
  });

  state.projects = [
    ...state.projects.slice(0, index),
    project,
    ...state.projects.slice(index + 1)
  ]
}

or you can use JSON.parse(JSON.stringify()) to make a deep copy of object

updateProject(state, project) {

  var index = state.projects.findIndex(function(item, i) {
    return item.id === project.id;
  });

  state.projects[index] = project;
  state.projects = JSON.parse(JSON.stringify(state.projects))
}

answered Apr 22, 2019 at 1:25

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

How to update object in vuex store array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related