मैंने अपने nuxt ssr में सफलतापूर्वक vue-product-zomer लागू किया है।

जब मैं इस पृष्ठ पर $router के माध्यम से आता हूं तो सब कुछ ठीक काम करता है

enter image description here

लेकिन जब मैं पेज को रीफ्रेश करता हूं तो यहां कुछ गलत हो जाता है स्क्रीनशॉट है

enter image description here

मेरे पास इस तरह का कोड है

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

और स्क्रिप्ट

      zoomerOptions: {
        zoomFactor: 4, // scale for zoomer
        pane: 'pane',
        hoverDelay: 300, 
        namespace: 'zoomer', 
        move_by_click: false, 
        scroll_items: 5, 
        choosed_thumb_border_color: 'orange', 
        scroller_button_style: 'line',
        scroller_position: 'left',
        zoomer_pane_position: 'right',
      },
0
sid heart 19 जिंदा 2021, 10:52

1 उत्तर

सबसे बढ़िया उत्तर

यह कभी-कभी होता है और मुझे जो एकमात्र तरीका मिला वह घटक को ताज़ा करना है, इसलिए निम्न कार्य करें:

अपने घटक में कुंजी जोड़ें

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

घुड़सवार हुक वृद्धि पर कुंजी

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++
    }
}

मुझे भरोसा है ये काम करेगा।

0
Mojtaba Barari 31 जिंदा 2021, 20:27