在Vue中按值拼接数组？答案

【问题标题】：splice array by value in Vue?在Vue中按值拼接数组？
【发布时间】：2018-08-26 09:35:41
【问题描述】：

我的组件中有一个对象列表，并希望添加在切换时将其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？

【问题讨论】：

标签： javascript arrays vue.js vue-component

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

这意味着你必须这样做：

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

【讨论】：

【解决方案3】：

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

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)

【讨论】：