Here is my problem:
tags
array used to loop to create a list of checkboxes.selectTags
array to store selected tags. Everytime a tag is check/uncheck, this array is updated.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.