Remove item from array using splice

Question

I am using Vue JS, I have 2 different arrays categories and items . Each item can belong to multiple categories, the items are generated dynamically and therefore not initially associated in the category array. Then I parse the category array to create tables containing the different items.

For testing purposes, I attach the items to it's associated category in the mounted vue property, as follows:

mounted: function() {
  for (let item of this.items) {
    for (let category of item.categories) {
      this.categories[category - 1].items.push(item)
    }
  }
}

Then when the delete button is pressed, I trigger a deleteItem method which uses splice to delete the item from the categories array and from the items array as well, but I am having a little issue there that the correct item does not get deleted.

  methods: {
    deleteItem: function(item) {
      for (let category of item.categories) {
        this.categories[category - 1].items.splice(this.categories[category - 1].items.indexOf(item, 1))
      }
      this.items.splice(this.items.indexOf(item, 1))
    }
  }

Please see the example Fiddle . Any help will be appreciated.

Answer 1

Change

this.items.splice(this.items.indexOf(item, 1))

to

this.items.splice(this.items.indexOf(item), 1)

so that you pass 1 as second argument to splice .

Note that you do the same error twice.