Vue尝试筛选数组,但没有结果

u4dcyp6a  于 2023-01-05  发布在  Vue.js
关注(0)|答案(2)|浏览(191)

我有Vue 3应用程序
我有一个posts对象。每个posts都有一个不同的类别。在页面的顶部有复选框,我可以选中这些复选框来过滤数组,只显示我添加到另一个名为visibleList的数组中的类别。如果我点击汽车的复选框,那么“cars”就会添加到visibleList中。
如果我选中汽车复选框,我需要只显示汽车类别的帖子。现在如果我选中该框,我看不到帖子
我创建了一个额外的对象,我可以用它来过滤对象。当我加载应用程序时,这个对象会被填充。
当我选中一个框时,帖子就会消失。在控制台中,我可以看到正确类别显示为真,其他类别显示为假的帖子数量。
下面是我的排序函数:

function filterPosts() {
    filtered.value = posts.value;
    if (visibleList.value.length != 0) {
        filtered.value = filtered.value.filter((e) => {
            visibleList.value.includes(e.category);
console.log(visibleList.value.includes(e.category));
        });
    } else {
        filtered.value = posts.value;
    }
}

我做错了什么,我看不到所选类别的帖子?

wnavrhmk

wnavrhmk1#

看起来您没有从筛选函数返回值。filter函数需要一个布尔值来确定元素是否应包含在筛选数组中。

filtered.value = filtered.value.filter((e) => {
    return visibleList.value.includes(e.category);
});
5cg8jx4n

5cg8jx4n2#

只是一个选择!!
由于您使用的是箭头函数,因此可以使用此方法来筛选值。

filtered.value = filtered.value.filter((e) => visibleList.value.includes(e.category));

相关问题