如何过滤Vue中复选框(数组)的结果

tcbh2hod  于 2023-01-05  发布在  Vue.js
关注(0)|答案(1)|浏览(192)

在Vue 2中,我无法显示分配了多个标记/复选框的新闻文章的结果。如果我选中单个标记/复选框,我的结果会正确显示。我在这里做错了什么?

var tagData = [
    {
        id: 1,
        title: "Internal"
    },
    {
        id: 2,
        title: "Industry"
    },
    {
        id: 3,
        title: "Company"
    }
];

var articleData = [
    {
        id: 1,
        pagetitle: "Card title that wraps to a new line",
        image: "https://via.placeholder.com/500x250/171717/222222?text=500x250",
        tags: [
            "Internal",
            "Industry",
            "Company",
        ],
        content: "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
        alias: "/news-article-1",
        published: 1672668835
    },
    {
        id: 2,
        pagetitle: "Card title",
        image: "https://via.placeholder.com/500x250/171717/222222?text=500x250",
        tags: [
            "Company",
        ],
        content: "This card has supporting text below as a natural lead-in to additional content.",
        alias: "/news-article-2",
        published: 1672668835
    },
    {
        id: 3,
        pagetitle: "Card with no image",
        image: "",
        tags: [
            "Internal",
            "Company",
        ],
        content: "This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.",
        alias: "/news-article-3",
        published: 1672668835
    },
    {
        id: 4,
        pagetitle: "Yet another article",
        image: "",
        tags: [
            "Industry"
        ],
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        alias: "/news-article-4",
        published: 1672668835
    },
];

var vm = new Vue({
    el: "#app",
    data: {
        articles: articleData,
        search: '',
        tags: tagData,
        checkedTags: []
    },
    computed: {
        searchArticles: function searchArticles() {
            var result = this.articles.filter(function (article) {
                // articles can have more than one tag/category assigned
                //if any checkboxes have been checked...
                if(this.checkedTags.length) {
                    return article.tags.some(tag => tag.includes(this.checkedTags)) && (article.pagetitle.toLowerCase().match(this.search.toLowerCase()) || article.content.toLowerCase().match(this.search.toLowerCase()) )
                } else {
                    return article.pagetitle.toLowerCase().match(this.search.toLowerCase()) || article.content.toLowerCase().match(this.search.toLowerCase())   
                }
            }, this);
            return result;
        }
    }
});

checkedTags包含一个数组。例如:["Internal", "Industry"]我尝试了.some.every的变体,但显然我的逻辑不正确。

l7wslrjt

l7wslrjt1#

您必须将标记检查更改为:

article.tags.some(tag => tag.includes(this.checkedTags))

改为:

this.checkedTags.every( tag => article.tags.includes(tag))

您必须检查所有选中的标签是否都存在于文章中。
您的检查.some(tag => tag.includes是错误的,因为您将includes应用于一个标记项。它应该是其他的。includes应该应用于一个数组。
tags.includes(tag),但不包括tag.includes(tags)
如果tags.length > 1满足以下条件,则tag.includes(tags)将始终为false
这里是工作操场。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

相关问题