Mario
Mario

Reputation: 19

Issue with gallery image loading randomly

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 the page looks when the images are not loaded

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

Answers (1)

Paola Tili
Paola Tili

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

Related Questions