vue.js - 在嵌套的 v-for 中使用 v-model

Question

我正在尝试在带有嵌套 v-for 循环的卡片组件中使用多个轮播组件，但我无法找到分配轮播 v-model 的正确方法，以便它是唯一的并且不会更新所有轮播当幻灯片被更改时，这是我目前拥有的， 这是我到目前为止的代码:

<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 的数据 Prop ，这有效，但是当我更改一个轮播的幻灯片时，所有轮播也会更改。 希望这是有道理的，我解释起来有点困难，但让我知道任何需要澄清的地方

编辑:在 codepen 中删除代码是链接:https://codepen.io/launchit-studio/pen/jOVrKzQ 我遇到的问题是 v-model 会影响所有轮播幻灯片，而不仅仅是被点击的那张。我知道这是因为幻灯片 Prop 由所有旋转木马共享，但我不确定要使用什么才能使其“独立”

Answer 1

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

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

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

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

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

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

这是 updated CodePen .