what is the proper way to use multiple carousel components inside v-for

[iodoli]

Need help. I have a card with v-for and inside I have carousel-slide with v-for. For carousel itself, there is v-model, and as in the tutorials I used slide: 1. I get a carousel working with images, but once I’m changing slides, the slides changing in all q-cards I have. My problem is how to make each carousel independent in swipe action. I understand carusel’s v-model is the one that need to be changed, but have no idea how to do it

//photo.id in every collection starts with 1
<q-card 
     v-for="(promo, key) in getPromos"
      :key="key"
      :id="key"
      :promo="promo"
    >
      <q-carousel
        v-model="slide"
        arrows
        infinite
        swipeable
        navigation
        animated
        control-color="white"
        padding
        height="300px"
        class="bg-primary text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide
          v-for="(photo, index) in promo.photos"
          :key="index"
          :url="photo"
          :name="photo.Id"
          :img-src="photo.url"
        />
      </q-carousel>
    </q-card>

//in export default
data() { return { slide: 1, }}

Is it a good approach to create a v-model in q-card with a function that will change q-carousel’s v-model value somehow dynamically?

[dobbel]

@iodoli

You are right the slide v-model is now shared between all carousels.

This will give you an idea how to solve that:

https://www.5balloons.info/dynamic-v-model-name-binding-in-v-for-loop-vuejs/

https://stackoverflow.com/questions/43364487/dynamic-v-model-name-in-a-v-for-loop-vue-2

[iodoli]

@dobbel nice articles, thank you. I understand new ideas in v-model binding. For now, I set unique v-model for q-carousel, but on the result page, no slide is selected by default, slides should be clicked to make them visible. This because carusel’s v-model doesn’t synchronized with carousel-slide’s name property right? If Im setting other values(@same with v-model) apart from photo.Id, I receive error that duplicate keys detected in carousel-slide

[iodoli]

@iodoli I came up to a stupid but working solution. I created ID of the doc and same ID is used for the first photograph (nosql db used), so my v-model(carousel) and :name(carousel-slide) are the same, thus slides are loading and there are no empty slides. I believe it is a kind of workaround, good approach still pending

[cupc4ke]

I had the same issue and binded the v-model to the index/id of the first v-for element (in your case it would be your promo key). It worked for me, I hope this helps.

[flunkout-dvlpr]

Hello guys, new to the forum, I am having the same issue as you @iodoli , did you ever figure out a good solution. I am trying to use the q-carousel inside q-cards using a v-for for the q-cards and a v-for inside for the q-carousel-slides. Can’t seem to wrap my head around what to use for the q-carousel v-model? Any suggestions would be greatly appreciated

[dobbel]

@launchit-studio

You should start your reply with the @the_person_you_want_to_ask so he gets a notification of your message.

Here’s another thread about this:
https://forum.quasar-framework.org/topic/7765/q-carousel-v-model-in-nested-v-for/4

[flunkout-dvlpr]

@dobbel thanks for the tip! I actually started that thread haha, got my questioned answered!