Cara menapis hasil kotak pilihan (tatasusunan) dalam Vue

Question

Saya tidak dapat memaparkan hasil untuk artikel berita yang mempunyai berbilang teg/kotak pilihan yang diberikan kepadanya dalam Vue 2. Jika saya menyemak satu label/kotak semak keputusan saya dipaparkan dengan betul. Apa yang mungkin saya lakukan salah di sini?

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 mengandungi tatasusunan. Contohnya: Variasi ["Internal", "Industry"] 我尝试过 .some 和 .every, tetapi jelas logik saya tidak betul.

Answer 1

Anda mesti menukar tag anda daripada semakan ini:

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

Untuk ini:

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

Anda perlu menyemak sama ada semua tag yang disemak ada dalam artikel.

Cek anda .some(tag => tag.includes 是错误的，因为您将 includes digunakan pada item yang ditanda. Ia sepatutnya sesuatu yang lain. termasuk hendaklah digunakan pada tatasusunan.

tags.includes(tag)，但不是tag.includes(tags)tags.includes(tag), tetapi bukan

tag.includes(tags)tags.length > 1，

tag.includes(tags) 将始终为 false Jika

tags.length > 1

,

tag.includes(tags) akan sentiasa menjadi

false 🎜Ini adalah taman permainan kerja. 🎜 🎜🎜 🎜

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>