I am working on a filtered image list that has buttons to change the filter, which in turn changes the rendered list of images.
The issue I am facing is that sometimes when switching back and forth between filters, the images get deloaded and need to be downloaded again.
Even after trying to use v-once, the problem still persists.
Check out my Codepen project here
<button v-on:click="filter('all')">All</button>
<button v-on:click="filter('tag1')">Tag 1</button>
<button v-on:click="filter('tag2')">Tag 2</button>
<div class="list-complete" tag="section">
<div
v-for="item in filteredItems"
v-bind:key="item.id"
class="list-complete-item"
>
<img class="list-complete-img" :src="item.img" alt="" />
</div>
</div>
methods: {
filter(tag) {
this.currentTag= tag;
}
},
computed: {
filteredItems: function() {
var filter = this.currentTag;
return this.items.filter(function(item) {
return item.tags.indexOf(filter) !== -1;
});
}
}
Strange enough, the issue is not always reproducible in the Codepen example (images deloading only sometimes), but in my local development environment, the images deload every time I toggle the filters.
I am considering whether it would be possible to modify the Vue computed filters to just make the images display none instead of directly removing them from the DOM like with v-show?