在嵌套的v-for中使用v-model

Question

我试图使用多个carousel组件内嵌套的v-for循环卡组件，但我有困难找出正确的方法来分配carousel v-model，使它是唯一的，不更新所有的carousel当幻灯片改变，这是我目前所拥有的，下面是我到目前为止的代码:

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

slide只是一个分配给0的数据道具，这是有效的，但是当我改变一个旋转木马的幻灯片时，所有的旋转木马也会改变。希望这是有意义的，对我来说解释它有点困难，但请告诉我任何需要澄清的地方

编辑:删除codepen中的代码，这里是链接:https://codepen.io/launchit-studio/pen/jOVrKzQ我遇到的问题是，v型模型影响了所有的旋转幻灯片，而不仅仅是点击的那个。我知道这是因为所有旋转木马共享幻灯片道具，但我不确定要使用什么才能使其"独立">

Answer 1

不要为所有幻灯片使用单个模型slide，而是使用模型数组。(一个对象也可以)。

data() {
return {
slide: 1,   ❌
activeSlides: []  ✅
}
}

v-for中carousel的索引也将用作数组中的索引:

<q-carousel
animated
arrows
navigation
infinite
style="height: 15rem;"
v-model="activeSlides[index]"
>

由于每个carousel的模型需要从1开始，因此您可以相应地初始化activeSlides:

created() {
const numCarousels = this.inventory.length;
this.activeSlides = Array(numCarousels).fill(1);
},

这是更新后的CodePen。