So filtern Sie die Ergebnisse von Kontrollkästchen (Arrays) in Vue

Question

Ich kann in Vue 2 keine Ergebnisse für Nachrichtenartikel anzeigen, denen mehrere Tags/Kontrollkästchen zugewiesen sind. Wenn ich eine einzelne Beschriftung/ein einzelnes Kontrollkästchen ankreuze, werden meine Ergebnisse korrekt angezeigt. Was mache ich hier möglicherweise falsch?

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 enthält ein Array. Zum Beispiel: Eine Variation von ["Internal", "Industry"] 我尝试过 .some 和 .every, aber offensichtlich ist meine Logik falsch.

Answer 1

您必须从此更改您的标签检查：

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

对此：

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

您必须检查文章中是否存在所有选中的标签。

您的检查 .some(tag => tag.includes 是错误的，因为您将 includes 应用于一个标记项。应该是其他情况。includes< /code> 应该应用于数组。

tags.includes(tag)，但不是tag.includes(tags)

如果 tags.length > 1

，

tag.includes(tags) 将始终为 false

这里是工作游乐场。

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",
    productionTip: false,
    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 this.checkedTags.every( tag => article.tags.includes(tag)) &&  (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;
        }
    }
});

.search {
  margin: 8px 4px 8px 4px;
}

<div id="app">
<div class="search">
<label>Search:</label> <input v-model="search" />&nbsp;
<label>Tags:</label> 
<span v-for="tag in tags">
<input type="checkbox" name="tags" :id="tag.id" :value="tag.title" v-model="checkedTags" /> 
<label for="tag.id">{{tag.title}}</label>&nbsp;
</span>
</div>
<table border=1>
<thead><tr><th>Id</th><th>Title</th><th>Tags</th></tr></thead>
<tbody>
<tr v-for="item in searchArticles">
  <td>{{item.id}}</td>
  <td>{{item.pagetitle}}</td>
  <td>{{item.tags}}</td>
</tr>  
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>