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

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

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.

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

Using v-model inside nested v-for

nested

carousel

vue.js

v-model

quasar-framework