比較數組時顯示/隱藏項目

Question

這是我的問題：

1. 我有一個用於循環創建復選框列表的tags數組。
2. 我有一個selectTags數組來存儲選定的標簽。 每次選中/取消選中標記時，都會更新此數組。
3. 我有一個存儲圖像 url 和圖像標簽的images對象，如下所示：

days : {
    day1 : {
        image1: {
            url : '',
            tags: ['tag1', 'tag2']
        },
        image2: {
            url : '',
            tags: ['tag1']
        },
    },
    day2 : {
        image1: {
            url : '',
            tags: ['tag3']
        },
        image2: {
            url : '',
            tags: ['tag1']
        },
    }
}

在我的循環組件中，我執行以下操作以顯示圖像：

<figure v-for="(image, index) in images" :key="index">
    <img :src="image['url']" alt="">
</figure>

現在，我需要根據選擇的標簽隱藏/顯示圖像

Answer 1

我想我找到了一個解決方案：

<figure
    v-for="(image, index) in images" 
   :key="index" 
    v-show="selectTags.filter(item => image['tags'].indexOf(item) > -1).length"
>
    <img :src="image['url']" alt="">
</figure>

我不知道這是否是最好的方法。 所以，歡迎提出建議。