如何在 Vue 中过滤复选框(数组)的结果
P粉440453689
P粉440453689 2023-09-06 20:25:35
[Vue.js讨论组]

我无法显示在 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 的变体,但显然我的逻辑是不正确。

P粉440453689
P粉440453689

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号