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



  • 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?



  • @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



  • @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 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


Log in to reply