如何实现vuetify伪轮播的多个*独立*行？

问题描述

我正在尝试在使用 'v-for' 的同时创建一堆独立控制的轮播，以便我以后可以轻松地使用 json 数据更新它们。玩了这两天后，我似乎无法弄清楚如何让每个轮播独立运行，同时仍然使用“v-for”创建许多轮播。

这是我的代码笔示例，以了解发生了什么。

https://codepen.io/chris4542/pen/LYRdRZp

这是与片段相同的代码：

new Vue({
  el: '#app',vuetify: new Vuetify(),data: () => ({
    model: null,rows: [
      {title: 'A'},{title: 'B'},{title: 'C'}
    ]
  }),})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <v-sheet
      v-for="row in rows"
      :key="row.title"
      class="mx-auto"
      elevation="8"
      max-width="800"
    >
      <v-subheader>
        <h2>{{row.title}}</h2>
      </v-subheader>
      <v-slide-group
        v-model="model"
        class="pa-4"
        center-active
        show-arrows
      >
        <v-slide-item
          v-for="n in 15"
          :key="n"
          v-slot="{ active,toggle }"
        >
          <v-card
            :color="active ? 'primary' : 'grey lighten-1'"
            class="ma-4"
            height="200"
            width="100"
            @click="toggle"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              <v-scale-transition>
                <v-icon
                  v-if="active"
                  color="white"
                  size="48"
                  v-text="'mdi-close-circle-outline'"
                ></v-icon>
              </v-scale-transition>
            </v-row>
          </v-card>
        </v-slide-item>
      </v-slide-group>
  
      <v-expand-transition>
        <v-sheet
          v-if="model != null"
          height="200"
          tile
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <h3 class="title">
              Selected {{ model }}
            </h3>
          </v-row>
        </v-sheet>
      </v-expand-transition>
    </v-sheet>
  </v-app>
</div>

解决方法

问题是每个轮播都使用相同的变量 model。

你可以有一个包含所有不同轮播值的数组：

model: [0,0]

new Vue({
  el: '#app',vuetify: new Vuetify(),data: () => ({
    model: [0,0],rows: [
      {title: 'A'},{title: 'B'},{title: 'C'}
    ]
  }),})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <v-sheet
      v-for="(row,idx) in rows"
      :key="row.title"
      class="mx-auto"
      elevation="8"
      max-width="800"
    >
      <v-subheader>
        <h2>{{row.title}}</h2>
      </v-subheader>
      <v-slide-group
        v-model="model[idx]"
        class="pa-4"
        center-active
        show-arrows
      >
        <v-slide-item
          v-for="n in 15"
          :key="n"
          v-slot="{ active,toggle }"
        >
          <v-card
            :color="active ? 'primary' : 'grey lighten-1'"
            class="ma-4"
            height="200"
            width="100"
            @click="toggle"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
            >
              <v-scale-transition>
                <v-icon
                  v-if="active"
                  color="white"
                  size="48"
                  v-text="'mdi-close-circle-outline'"
                ></v-icon>
              </v-scale-transition>
            </v-row>
          </v-card>
        </v-slide-item>
      </v-slide-group>
  
      <v-expand-transition>
        <v-sheet
          v-if="model != null"
          height="200"
          tile
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <h3 class="title">
              Selected {{ model }}
            </h3>
          </v-row>
        </v-sheet>
      </v-expand-transition>
    </v-sheet>
  </v-app>
</div>