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
         v-for="(promo, key) in getPromos"
            class="bg-primary text-white shadow-1 rounded-borders"
              v-for="(photo, index) in promo.photos"
    //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:



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

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

Log in to reply