Remove whole object from array in vue

Question

Right now I have an array with multiple companies.

Like this but only 1:

[{
    "id": 4,
    "name": "Lorem",
    "description": "Lorem ipsum"
}]

I loop through the companies and pass the company with the delete function.

<a @click="deleteCompany(company)"><i class="fa fa-trash" aria-hidden="true"></i></a>

deleteCompany(company) {
    Vue.delete(company, 'name');
}

As of right now it only deletes the name.. but how do I delete the whole object?

tony19 · Accepted Answer · 2022-07-16 02:53:57Z

1

Assuming your array of companies is in the data for the Vue, you would remove it this way:

deleteCompany(company) {
    // find the index of the company object in the companies array
    const where = this.companies.findIndex(c => c === company)
    // splice the object from the array
    this.companies.splice(where, 1)
}

This could be shortened a bit if you chose to pass the index of the company to the function instead of the company itself.

You could also use Vue.delete, but it is not necessary in this case; splice will do. If you wanted to use Vue.delete, it would look like this: Vue.delete(this.companies, where).

edited Jul 16, 2022 at 2:53

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 14, 2018 at 12:18

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Remove whole object from array in vue

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