One of my current challenges involves managing a list of tags and a separate list of selected tags:
data () {
return {
tags: ['#tag1', '#tag2', '#tag3'],
selectTags: ['#tag1', '#tag2', '#tag3'],
images: {}
}
},
To handle this, I have implemented 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>
These tags serve as keys within a collection of images. My goal is to display or hide images based on the content of the select Tags array. If an image key is present in the list, the image should be visible. Otherwise, it should 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>
I have encountered issues with this setup both during page load and when deselecting a tag.