admin 管理员组

文章数量: 1086019

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
Share Improve this question asked Mar 17, 2018 at 11:48 Jared GarciaJared Garcia 7911 gold badge9 silver badges19 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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)

本文标签： javascriptsplice array by value in VueStack Overflow

版权声明：本文标题：javascript - splice array by value in Vue? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744092796a2532347.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。