javascript - 比较数组时显示/隐藏项目(Show/hide items when comparing arrays)

Question

Here is my problem:

(这是我的问题：)

1. I have an tags array used to loop to create a list of checkboxes.

   (我有一个用于循环创建复选框列表的tags数组。)

2. I have a selectTags array to store selected tags.

   (我有一个selectTags数组来存储选定的标签。)

   Everytime a tag is check/uncheck, this array is updated.

   (每当标签被选中/取消选中时，此数组都会更新。)

3. I have an images object that store image url and image tags, like this:

   (我有一个存储图像URL和图像标签的images对象，如下所示：)

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

Inside my loop component, I do the follow to show images:

(在循环组件内部，执行以下操作以显示图像：)

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

Now, I need to hide/show images based on what tags are selected

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

  ask by marcelo2605 translate from so

Answer 1

I think I found a solution:

(我想我找到了解决方案：)

<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>

I don't known if this is the best approach.

(我不知道这是否是最好的方法。)

So, suggestions are welcome.

(因此，欢迎提出建议。)