嵌套数组场景下使用filter方法无法删除指定元素该如何解决

问题根因 #

你的原有代码存在两处逻辑错误：

• Array.filter 方法的返回值始终是数组，即使过滤后没有元素也是真值，外层filter会保留所有外层数组元素，完全不会触发删除逻辑
• 你的需求是修改外层元素的value属性（删除内部子元素），而不是删除外层数组的元素，外层不应该用filter方法

正确实现代码 #

场景1：删除子元素后即使value数组为空，也保留外层元素

handleRemove(eve) {
    const removeSelected = eve.target.name;
    this.arrayvar = this.arrayvar.map(item => {
        // 过滤当前外层元素的value数组，移除目标元素
        const filteredValue = item.value.filter(val => val !== removeSelected);
        // 返回更新后的外层元素，避免直接修改原对象
        return {...item, value: filteredValue};
    });
}

场景2：删除子元素后如果value数组为空，同步删除对应的外层元素

handleRemove(eve) {
    const removeSelected = eve.target.name;
    this.arrayvar = this.arrayvar
        .map(item => ({
            ...item,
            value: item.value.filter(val => val !== removeSelected)
        }))
        // 过滤掉value为空的外层元素
        .filter(item => item.value.length > 0);
}

补充提示 #

你给出的初始arrayvar代码存在语法错误，每个对象缺少闭合的}，修正后的合法结构如下：

@track arrayvar = [
    {"key":"Array1","value":["test1","test2","test3"]},
    {"key":"Array2","value":["test4"]}
];

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