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

【问题标题】：Using v-model inside nested v-for在嵌套的 v-for 中使用 v-model
【发布时间】：2021-02-09 03:30:31
【问题描述】：

我正在尝试使用嵌套 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 中删除代码是链接：https://codepen.io/launchit-studio/pen/jOVrKzQ 我遇到的问题是 v 模型会影响所有轮播幻灯片，而不仅仅是单击的那个。我知道这是因为幻灯片道具由所有轮播共享，但我不确定要使用什么才能使其“独立”

【问题讨论】：

标签： vue.js nested carousel quasar-framework v-model

【解决方案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。

【讨论】：