Vue2 -将字符串压入数组只是替换现有字符串而不是添加它

Question

我试图在一个方法中从本地数据数组中添加/删除字符串，我的逻辑总是以数组总是只有一个字符串结束，即传递给updateIdArr方法的字符串。

即使我删除了else//删除部分，push也不会"到数组。数组只有1个字符串，最后一个值被压入。

我错过了什么?

data() {
return {
idArr: [],
}
},
methods: {
updateIdArr(show) {
if (!this.idArr.includes(show._id)) {
// add
this.idArr.push(show._id);
} else {
// remove
this.idArr = this.idArr.filter((id) => id !== show._id);
}
console.log(this.idArr); 
// always has *only* the most recent value
// e.g. ['01GDKN93GP6Q0QDBVQ3W9BDT6D', __ob__: Observer]
},
}

Answer 1

更新:愚蠢的人为错误

每个局部数据值都在一个单独的组件中。我需要向父元素发出并在那里维护数组

Answer 2

您的remove方法没有做任何事情，因为与push不同，filter不修改数组，而是返回一个新的数组:

this.idArr = this.idArr.filter((id) => id !== show._id);

不确定这是否会破坏这个__ob__: Observer的东西正在做的事情，如果是这样，你可能需要使用for循环或其他东西来过滤它。

Answer 3

你能试试吗?

data() {
return {
idArr: [],
}
},
methods: {
updateIdArr(show) {
if (!this.idArr.includes(show._id)) {
// add
this.idArr.push(show._id);
}
var _this = this;
this.$nextTick(() => {
delete _this.idArr[_this.idArr.findIndex(x => x.id === show._id)];
})

},
}
}