CODEWITHSUNDEEP
vue.jsnuxt.jsvuex
chtouk
chtouk

Reputation: 311

Deleting an item in the store Vuex

I would like to delete an item that is located in my store. I saw this solution https://stackoverflow.com/a/59686164/11984242 which seems to be what I'm looking for BUT I have another "level" in my object so I don't know how to delete an element from a sub-level.

The structure of my data.

{
    id: 1,
    name: 'My customer one',
    projects: [
        {
            id: 1,
            name: 'name',
            tests: [
                {
                    id: 1,
                    name: 'name test'
                },
                {
                    id: 2,
                    name: 'name test 2'
                }
            ]
        },
        {
            id: 2,
            name: 'other name'
        }
    ]
}

So I see how to delete a project with the link above. But how to delete one row of tests ?

I do this in my vue :

this.$store.commit("deleteTest", this.idProject, e)

And this in my store :

deleteTest(state, {data, e}) {
    const allTestsOfProject = state.listProjects.projects.find(p => p.id === data)
    console.log("all", allTestsOfProject)
    const oneTest = allTestsOfProject.studies.find(q => q.id === e)
    console.log("one test", oneTest)
    //state.listProjects.projects.splice(oneTest, 1)
  }

Thanks a lot for help

Upvotes: 2

Views: 1003

Answers (1)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

You Have two problem with your code:

First Problem

commit function takes only 2 params:

  1. commit name ( as String )
  2. Payload Pbject

so if you want to pass multiple props you should pass them as an object

this.$store.commit("deleteTest", this.idProject, e) // WON'T WORK
this.$store.commit("deleteTest", {data: this.idProject, e}) // WILL WORK

now you can call deleteTest(state, {data, e})

Second Problem

you should get the INDEX of tests object not the OBJECT itself

const oneTest = allTestsOfProject.studies.find(q => q.id === e) // WON'T WORK
const oneTest = allTestsOfProject.studies.findIndex(q => q.id === e) // WILL WORK

now you can call: allTestsOfProject.studies.findIndex (q => q.id === e) to delete your test

Upvotes: 5

Related Questions