Question

我的组件中有一个对象列表，并希望添加切换时的功能，将其title道具推入阵列或移除。推送部分我很容易实现，但是删除值非常困难，因为索引的拼接在这种情况下没有帮助，因为可以按任何顺序选择项目并将其推送到数组：

数据

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

模板

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

脚本

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)
}

我知道我在语法上错误地使用splice，所以我如何实现我想做的事情？有没有splice？

Answer 1

为什么不简单地过滤掉它？

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

Answer 2

splice函数的预期参数是开始索引和删除计数

这意味着你必须做这样的事情：

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

Answer 3

The correct form for splice is (index, count, insert)。最后一个参数insert将函数的行为更改为 add 到数组，而不是删除。要在此处使用拼接，您首先必须获取该项目的索引，然后通过保留最后一个参数来指定您要删除一个项目。

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

或者，filter可以作为一种简单的替代方案，也是我在这里采用的方法。

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

按Vue中的值拼接数组？

3 个答案: