简体   繁体   中英

Show/hide items when comparing arrays

Here is my problem:

  1. I have an tags array used to loop to create a list of checkboxes.
  2. I have a selectTags array to store selected tags. 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:
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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM