akulubala / vue-product-zoomer

Zoom Prodct Image, useful for e-shop website
http://www.yoohooworld.com/demo.html
MIT License
289 stars 69 forks source link

Unable to load Product Zoomer in data object #40

Closed PriyankaSawant26 closed 5 years ago

PriyankaSawant26 commented 5 years ago

If I put the sample data in return object it displays the output but if I dynamically call the image object unable to load data in product zoomer data object

If I place this code it displays the output images: { thumbs: [ { id: 1, url: "http://localhost:8000/images/product/thumbs/MICMIMC30651-6.jpg" }, { id: 2, url: "http://localhost:8000/images/product/thumbs/MICMIMC30651-61.jpg" }

    ],
    normal_size: [
      {
        id: 1,
        url:
          "http://localhost:8000/images/product/preview/MICMIMC30651-6.jpg"
      },
      {
        id: 2,
        url:
          "http://localhost:8000/images/product/preview/MICMIMC30651-61.jpg"
      }

    ],
    large_size: [
      {
        id: 1,
        url:
          "http://localhost:8000/images/product/original/MICMIMC30651-6.jpg"
      },
      {
        id: 2,
        url:
          "http://localhost:8000/images/product/original/MICMIMC30651-61.jpg"
      }
              ]
  },

But when I call dynamically

data(){ return { images:[], zoomerOptions: { zoomFactor: 3, pane: "pane", hoverDelay: 300, namespace: "zoomer-bottom", move_by_click: false, scroll_items: 4, choosed_thumb_border_color: "#dd2c00", scroller_position: "bottom", zoomer_pane_position: "right" } } },

1 2

error: 1. Invalid prop: type check failed for prop "baseImages". Expected Object, got Array

  1. Product Zoomer Need Normal Size Image At Least!!!
akulubala commented 5 years ago

@erpriyanka image thumbs must provide for this plugin

PriyankaSawant26 commented 5 years ago

I called image:[] in return function dynamically for each product page and I get the output which you can see on the first screenshot but unable to render images.

akulubala commented 5 years ago

@erpriyanka can you put all your reletive code here?

akulubala commented 5 years ago

Hi @erpriyanka I got your email, I think your problem is caused by Object change limitation from javascript, check the document here: https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats