\n
This is how I get my fetched gallery
\n import { reactive} from 'vue';\n \n export default {\n transition:'fade',\n layout: 'layout_port',\n data(){\n return{\n \n filter:'original',\n indexGal: null,\n sortmenu:['original','fanart','concepts','graphic design'], \n gallery: reactive (['static images here']),\n \n }\n },\n computed:{\n fetchedGallery() {\n if (this.filter) {\n return this.gallery.filter(i => i.cat === this.filter)\n }\n return this.gallery\n }\n },\n \n }\n \n
\nAnd this is how I show the images
\n#portfolio\n v-main\n v-container(fluid).ma-0.pa-0\n v-layout(justify-center)\n v-flex(xs12 text-xs-center)\n v-card(flat color='transparent')\n ul\n li(v-for='(category,index) in sortmenu' :key='index' :item='category' @click='filter = category' :class="{ active: category == filter }") {{ category }}\n \n\n v-layout()\n v-flex(xs12 sm6 offset-sm3)\n v-card(flat color='white').gallery\n v-container(grid-list-sm fluid)\n v-layout(row wrap)\n //keep-alive\n v-flex(v-for='(image,index) in fetchedGallery', :key='index' :item='image',xs6 sm4 d-flex)\n v-card.d-flex(flat tile color='transparent').galim.pa-4\n v-img.grey.lighten-2(:src='image.url', :lazy-src='image.url', aspect-ratio='1' @click='indexGal = index')\n br\n no-ssr\n LightGallery(:images='fetchedGallery' :index='indexGal' :disable-scroll='true' @close='indexGal = null' interfaceColor='rgba(255,253,238)' background='rgba(0,0,0,0.95)')\n \n
\n","author":{"@type":"Person","name":"Mario"},"upvoteCount":0,"answerCount":1,"acceptedAnswer":null}}Reputation: 19
I have a problem loading a fetched gallery: when I load the gallery page, images load as expected, but when I go to a different page, for example home page followed by coming back to gallery page, the images are not loaded and the container is totally empty, in other words, jumping from page to page makes the images in gallery page load randomly. If I was not clear please let me know so I can elaborate more n_n'. Thanks in advance.
This is how I get my fetched gallery
import { reactive} from 'vue';
export default {
transition:'fade',
layout: 'layout_port',
data(){
return{
filter:'original',
indexGal: null,
sortmenu:['original','fanart','concepts','graphic design'],
gallery: reactive (['static images here']),
}
},
computed:{
fetchedGallery() {
if (this.filter) {
return this.gallery.filter(i => i.cat === this.filter)
}
return this.gallery
}
},
}
And this is how I show the images
#portfolio
v-main
v-container(fluid).ma-0.pa-0
v-layout(justify-center)
v-flex(xs12 text-xs-center)
v-card(flat color='transparent')
ul
li(v-for='(category,index) in sortmenu' :key='index' :item='category' @click='filter = category' :class="{ active: category == filter }") {{ category }}
v-layout()
v-flex(xs12 sm6 offset-sm3)
v-card(flat color='white').gallery
v-container(grid-list-sm fluid)
v-layout(row wrap)
//keep-alive
v-flex(v-for='(image,index) in fetchedGallery', :key='index' :item='image',xs6 sm4 d-flex)
v-card.d-flex(flat tile color='transparent').galim.pa-4
v-img.grey.lighten-2(:src='image.url', :lazy-src='image.url', aspect-ratio='1' @click='indexGal = index')
br
no-ssr
LightGallery(:images='fetchedGallery' :index='indexGal' :disable-scroll='true' @close='indexGal = null' interfaceColor='rgba(255,253,238)' background='rgba(0,0,0,0.95)')
Upvotes: 0
Views: 65
Reputation: 64
This issue is most likely caused by the way vue handles reactivity and component lifecycle. What I would suggest is using <keep-alive>
around <router-view>
tag to avoid unnecessary destruction and recreation of components during navigation.
<keep-alive>
<router-view />
</keep-alive>
This will ensure that the component that is once loaded, won't get destroyed when you navigate to another page.
Also, I would also suggest using reactive
to declare your gallery images.
gallery = reactive([
'insert images here.'])
To debug the issue, please console log gallery
after you navigate back to check if it's acting as expected.
Another solution can be to call fetchGallery
inside a onMounted
hook (so you are sure it's fetching once the component is being mounted), but this is mostly suggested when you fetch from an API.
Upvotes: 0