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

Question

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

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

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

这是和 sn-p 相同的代码：

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>

Answer 1

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

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

model: [0, 0, 0]

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    model: [0, 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>