How to filter results of checkboxes (array) in Vue
P粉440453689
P粉440453689 2023-09-06 20:25:35
0
1
564

I am unable to display results for news articles that have multiple tags/checkboxes assigned to them in Vue 2. If I check a single label/checkbox my results display correctly. What might I be doing wrong here?

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 contains an array. For example:["Internal", "Industry"]I've tried variations of.someand.every, but obviously my logic is incorrect.

P粉440453689
P粉440453689

reply all (1)
P粉094351878

You must change your tag check from this:

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

Regarding:

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

You must check if all selected tags are present in the article.

Your check.some(tag => tag.includesis wrong because you are applyingincludesto a tag item. It should be something else.includes Should be applied to arrays.

tags.includes(tag), but nottag.includes(tags)

If tags.length > 1,

tag.includes(tags)will always befalse

This is a work playground.

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; }
IdTitleTags
{{item.id}} {{item.pagetitle}} {{item.tags}}
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!