Vue.js Vue筛选重新调整数组中的所有对象，即使它们没有'；与搜索条件不匹配

我正在Vue中构建一个词汇表，并添加一个计算过滤器。它过滤结果，但返回数组中的所有对象，即使它们不匹配。它似乎只需要找到一个匹配的对象，然后返回所有内容。在下面的JSON示例中，有两个条目：B和H，每个条目中都有对象：BBB、XXX、HHH和XXX。如果我输入BBB，我将返回BBB和XXX，但我不希望看到XXX

我的JSON数据结构如下所示：

[
{
“标题”：“b”，
“链接”：“b”，
“项目”：[
{
“头衔”：“BBB”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“XXX”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
}
]
},
{
“标题”：“h”，
“链接”：“h”，
“项目”：[
{
“标题”：“HHH”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“XXX”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
}
]
}
]

计算筛选代码：

filteredPosts（）{
让compItems=this.compItems；
如果（这个过滤器）{
compItems=compItems.filter（项=>{
返回item.items.some（子项=>{
返回(
分项.标题
.toLowerCase（）
.indexOf（this.filterTitle.toLowerCase（））！=-1
);
});
});
}
归还物品；
}

我的加价的简化版本：

{{item.title}

{{subItem.title}}

数组方法

某些

将只返回布尔值（）

实际上，您希望映射和筛选子项标题包含筛选项的位置

filteredPosts() {
    if (this.filterTitle) {
      return compItems.map(item => {
        return item.items.filter(subItem => {
          return subItem.title
            .toLowerCase()
            .includes(this.filterTitle.toLowerCase())
        });
      });
    }

    return this.compItems;
  }

---

您的筛选器正在其子项数组中正确查找具有匹配标题的所有项，但它不会筛选出不匹配的子项。为此，只需添加另一行来筛选子项：

filteredPosts（）{
让compItems=this.compItems；
如果（这个过滤器）{
//在其`项目[]中查找具有匹配标题的所有项目`
compItems=compItems.filter（item=>…）；
//筛选出不匹配的`项[]`
compItems=compItems.map（item=>{
const items=item.items.filter（x=>x.title.toLowerCase（）.indexOf（this.filterTitle.toLowerCase（））！=-1）
返回{
…项目，
items//overwrite`items[]`与我们的筛选项
}
})
}
归还物品；
}

newvue({
el:“#应用程序”，
数据（）{
返回{
过滤器：''，
compItems:[]
}
},
安装的（）{
此.compItems=[
{
“标题”：“b”，
“链接”：“b”，
“项目”：[
{
“头衔”：“BBB”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“XXX”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“BBB 2”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
]
},
{
“标题”：“h”，
“链接”：“h”，
“项目”：[
{
“标题”：“HHH”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“XXX”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
{
“标题”：“BBB3”，
“内容”：“Lorem ipsum door sit amet，Concetetur adipsicing elite.Curabitur libro ipsum，euismod posuere posuere ac，rhoncus eget nisi.Present ac Lorem ut est fringilla porta.
”，
“活动”：错误
},
]
}
]
},
计算：{
filteredPosts（）{
让compItems=this.compItems；
如果（这个过滤器）{
compItems=compItems.filter（项=>{
返回item.items.some（子项=>{
返回(
分项.标题
.toLowerCase（）
.indexOf（this.filterTitle.toLowerCase（））！=-1
);
});
});
compItems=compItems.map（item=>{
const items=item.items.filter（x=>x.title.toLowerCase（）.indexOf（this.filterTitle.toLowerCase（））！=-1）
返回{
…项目，
项目
}
})
}
归还物品；
}