Carousel with v-for

[dlucasbra]

Hello friends,

I trying to use QCarousel to show some images from my Laravel backend, however I having problems to use v-for directive with q-carousel-slide, for example:

 <q-carousel-slide
   :name="1"
   :img-src="images[0].path"
 />

^ This work’s fine!

<q-carousel-slide
    v-for="image in images"
    :key="image.id"
    :name="image.name"
    :img-src="images.path"
 />

^ This not works, no console errors and no GET requests to server.

I found another similar topic about this, but basically the solution was use v-for like above. am I doing something wrong?

[s.molinari]

That should work. Is your data properly initialized? i.e. is images part of your component’s data? hmm… that would throw an error.

Best thing is to show your whole component, and even better, create a codepen with your code.

Scott

[tof06]

@dlucasbra
Don’t know if it’s a typo or not, but in your img-src property in the second screenshot, you use images.path. It should be image.path (without the s)

[s.molinari]

Good catch @dlucasbra !!!

Scott

[tof06]

@s-molinari said in Carousel with v-for:

Good catch @dlucasbra !!!

Scott

My nickname is tof06, or Christophe for the real name… But never mind, I’ll take the compliment

[s.molinari]

Oops. @ mentioned the wrong person. Sorry bout that.

Scott