Vue中如何删除数组内已存在的指定元素

你只需要在原注释的位置用Array.prototype.filter生成删除指定元素后的新数组，再通过Vue.set更新即可，该方案天然符合Vue响应式数据更新规则，不会出现视图不更新的问题。

修改后的完整函数代码如下：

updateAnswer(key, answer, array = false) {
    if (array) {
        if(this.answers.contains.find(element => element === answer)) {
            // 过滤排除匹配的answer元素，生成新数组后更新响应式数据
            Vue.set(this.answers, key, this.answers.contains.filter(element => element !== answer));
        } else {
            Vue.set(this.answers, key, [...this.answers.contains, answer]);
        }

    } else {
        Vue.set(this.answers, key, answer);
    }
},

可选精简优化 #

你也可以省去前置的存在判断逻辑，直接合并数组的新增/删除逻辑，代码更简洁：

updateAnswer(key, answer, array = false) {
    if (array) {
        const newArr = this.answers.contains.includes(answer)
            ? this.answers.contains.filter(el => el !== answer)
            : [...this.answers.contains, answer]
        Vue.set(this.answers, key, newArr)
    } else {
        Vue.set(this.answers, key, answer);
    }
},

内容的提问来源于stack exchange，提问作者Max