[Vuejs]-How to fix unloaded images in "vue product zoomer" nuxt ssr

by

0👍

✅

It happens sometimes and the only way that i found is to refresh the component, so do the following:

add key to your component

<client-only>
   <ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" :key=""key/>
</client-only>

on mounted hook increment the key

export default {
    data(){
        return{
            key:0,
        }
    },
    mounted(){
        // You may need to do the increment in a setTimeout (as for me doing it after 2 sec because of my skeleton loader)
        this.key++
    }
}

Hope it works.

Leave a comment