show/hide images based on array list

Question

I have a list of tags and a list of selected tags:

data () {
    return {
        tags: ['#tag1', '#tag2', '#tag3'],
        selectTags: ['#tag1', '#tag2', '#tag3'],
        images: {}
    }
},

With them, I created a checkbox loop:

<div v-for="tag in tags" :key="tag">
    <input type="checkbox" :id="tag" :value="tag" v-model="selectTags" checked>
    <label :for="tag">{{ tag }}</label>
</div>

This tags is used as keys in a list of images. I would like to show/hide image based on select Tags list. If this image key in on the list, the image show. Otherwise, it's will be hidden.

<template v-for="(tag, index) in images" v-show="selectTags.includes(index)">
    <figure class="thumb" v-for="path in tag['best']['paths']" :key="path">
        <img :src="path | formatImageURL" alt="">
    </figure>
</template>

This not works when page loaded and when I uncheck a tag.

your v-model is set to an array on the checkbox, so if you check that checkbox, selectTags will be set to true. — Glenn van Acker
– Glenn van Acker, Commented Nov 21, 2019 at 13:28

tony19 · Accepted Answer · 2022-07-16 00:58:36Z

1

You cannot use the v-show directive on a template element, it will have no effect. You need to use it on the child element contained within it, in your case the figure element.

See relevant official doc here:

Note that v-show doesn’t support the <template> element, nor does it work with v-else.

edited Jul 16, 2022 at 0:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 21, 2019 at 13:34

steve16351

5,8572 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

show/hide images based on array list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related