我無法顯示在 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
的變體,但顯然我的邏輯是不正確。
您必須從此更改您的標籤檢查:
對此:
您必須檢查文章中是否存在所有選取的標籤。
您的檢查
.some(tag => tag.includes
是錯誤的,因為您將includes
套用到一個標記項。應該是其他情況。includes 應該應用於陣列。
# 如果tags.includes(tag)
,但不是tag.includes(tags)
tags.length > 1
,tag.includes(tags)
將始終為false
這裡是工作遊樂場。