I have a list of objects in my ponent and want to add functionality that when toggled, either get their title prop pushed onto an array or removed. The push part i implemented rather easily, however removing the value is pretty difficult since splicing by index doesn't help in this situation being that the items can be selected and pushed onto the array in any order:

data

data () {
    return {
        options = [
            {
                title: "pie",
                isSelected: false
            },
            {
                title: "cupcakes",
                isSelected: false
            },
            {
                title: "muffins",
                isSelected: false
            }
        ],
        selected : []
    }
},

template

<template>
    <div>
        <div
            v-for="(item, index) in options"
            :key="index"
            v-on:click="toggleSelected(index, item)">
            {{ item.title }}
        </div>
    </div>
</template>

script

toggleSelected: function (index, item) {
    item.isSelected = !item.isSelected

    if (this.selected.includes(item.title)) {
        return this.selected.splice(item.title) // does not work as expected
    }
    return this.selected.push(item.title)
}

I know i am syntactically using splice incorrectly, so how do i achieve what i am looking to do? with or without splice?

I have a list of objects in my ponent and want to add functionality that when toggled, either get their title prop pushed onto an array or removed. The push part i implemented rather easily, however removing the value is pretty difficult since splicing by index doesn't help in this situation being that the items can be selected and pushed onto the array in any order:

data

data () {
    return {
        options = [
            {
                title: "pie",
                isSelected: false
            },
            {
                title: "cupcakes",
                isSelected: false
            },
            {
                title: "muffins",
                isSelected: false
            }
        ],
        selected : []
    }
},

template

<template>
    <div>
        <div
            v-for="(item, index) in options"
            :key="index"
            v-on:click="toggleSelected(index, item)">
            {{ item.title }}
        </div>
    </div>
</template>

script

toggleSelected: function (index, item) {
    item.isSelected = !item.isSelected

    if (this.selected.includes(item.title)) {
        return this.selected.splice(item.title) // does not work as expected
    }
    return this.selected.push(item.title)
}

I know i am syntactically using splice incorrectly, so how do i achieve what i am looking to do? with or without splice?

• javascript
• arrays
• vue.js
• vue-ponent

3 Answers 3

Why not simply filter it out?

return this.selected = this.selected.filter(title => title !== item.title);

The expected parameters of the splice function are the start index and the delete count

Which means that you'll have to do something like this:

this.selected.splice(this.selected.indexOf(item.title), 1);

The correct form for splice is (index, count, insert). The last parameter insert changes the behavior of the function to add to the array, as opposed to removing. To use splice here, you'll first have to get the index of the item, then specify that you want to remove one item by leaving the last parameter out.

const index = this.selected.indexOf(item.title)
if (index > -1) {
  this.selected.splice(index, 1);
}

Alternatively, filter works as a simple alternative, and is the approach I'd go with here.

this.selected = this.selected.filter(title => title !== item.title)