Q-Carousel v-model in nested v-for?
-
Hello everyone, new to the forum, my apologies if this is not the right place to post this question.
I am trying to use multiple q-carousel/slide components inside q-cards with v-for loops but I’m having trouble figuring out the correct way to assign the q-carousel v-model so that it’s unique and doesn’t update all the q-carousels when the slide is changed
Here is the code I have so far:<q-card v-for="(item, index) in inventory" :key="index" style="width: 20rem;" > <q-card-section class="q-pa-none text-white" > <q-carousel animated arrows navigation infinite style="height: 15rem;" v-model="slide" // What should this be assigned so that > <q-carousel-slide v-for="(image, index) in item.images" :key="index" :name="index" //It works with the slide name and only updates the respective q-carousel :img-src="image.url" > </q-carousel-slide> </q-carousel> </q-card-section> </q-card>
Hopefully this makes sense, It’s a bit hard for me to explain it but let me know anything that needs clarification
Thank you!!!
-
@launchit-studio works fine here, your data must have a bug or something, hard to know when you haven’t provided info on it.
https://codepen.io/metalsadman/pen/yLVJEaR?editors=1010
edit: try to use a different
index
variable on your inner v-for. -
Thanks for the reply! @metalsadman sorry about the confusion, I dropped it in codepen, as you will see the issue I am having is with the v-model affecting all of the carousel slides not just the one clicked.
https://codepen.io/launchit-studio/pen/jOVrKzQ -
@launchit-studio thanks for making a codepen, you will have to adjust your data to hold a model for each carousel. https://codepen.io/metalsadman/pen/MWbeXZM?editors=1010
-
@metalsadman That worked perfectly! Thank you!, I guess I got too caught up trying to find an “elegant” solution that would work with the data that was already provided that totally dismissed this approach. Sometimes simple is better!