javascript - 比较数组时显示/隐藏项目

Question

这是我的问题：

1. 我有一个tags用于循环创建复选框列表的数组。
2. 我有一个selectTags数组来存储选定的标签。每次选中/取消选中标签时，都会更新此数组。
3. 我有一个images存储图像 url 和图像标签的对象，如下所示：

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>

现在，我需要根据选择的标签隐藏/显示图像

标签： javascriptvue.jsvuejs2

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>

我不知道这是否是最好的方法。所以，欢迎提出建议。