Vuetify：如何防止所有扩展转换同时发生？

Question

我正在创建一个包含多张卡片的页面，每张卡片都有一个 v-expand-transition，我正在一个 v-for 循环中创建所有卡片。问题是，如果我单击一个 v-expand-transition，那么它们都会打开。我知道这是因为它们都连接到同一个“节目”，但我不确定如何将它们分开以便每个人都有自己的活动。我的代码在这里：

<template>
<v-container>
    <h1 class="font-weight-medium pa-6">All Labs</h1>
    <v-row dense>
      <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
        <v-card class="mx-auto" max-width="350">
          <v-img class="white--text align-end" height="200px" :src="card.src" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
            <v-card-title v-text="card.title"></v-card-title>
          </v-img>
        <v-card-subtitle class="pb=0" v-text="card.location"></v-card-subtitle>
        <v-card-text class="text--primary">
          <div v-text="card.hours"></div>
          <div v-text="card.keycardInfo"></div>
        </v-card-text>
        <v-card-actions>
            <v-btn color="blue" :href="card.directions" text target="_blank">Directions</v-btn>
          <v-btn color="blue" :to="card.page" text>Learn More</v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click="show = !show">
            <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down'}}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-show="show">
            <v-divider></v-divider>
            <v-card-text v-text="card.bottomInfo"></v-card-text>
          </div>
        </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

我的脚本在这里：

<script>
import App from '../App.vue'

  export default {
  components: { App },
    name: 'Home',
    data: () => ({
      show: false,
      cards: [],
        
    }),
  }
</script>

我清空了卡片以避免页面混乱。

Answer 1

发生的情况是，由于您使用单个变量来控制组件的状态，因此该操作最终会反映给每个人。一种替代方法是在列表中的每个对象内添加一个“显示”属性，使每个对象都有自己的状态。这是它的外观示例：

new Vue({
  el: '#app',
  data() {
    return {
       cards: [{
         title: "My title",
         flex: 6,
         src: '#',
         location: '#',
         hours: '13',
         keycardInfo: 'Info',
         directions: '#',
         page: '#',
         to: '#',
         bottomInfo: 'Bottom info',
         show: false,
       },
       {
         title: "My title 2",
         flex: 6,
         src: '#',
         location: '#',
         hours: '13',
         keycardInfo: 'Info 2',
         directions: '#',
         page: '#',
         to: '#',
         bottomInfo: 'Bottom info 2',
         show: false,
       }],
    }
  }
})

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
<div id="app">
  <v-container>
    <h1 class="font-weight-medium pa-6">All Labs</h1>
    <v-row dense>
      <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
        <v-card class="mx-auto" max-width="350">
          <v-img class="white--text align-end" height="200px" :src="card.src" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
            <v-card-title v-text="card.title"></v-card-title>
          </v-img>
        <v-card-subtitle class="pb=0" v-text="card.location"></v-card-subtitle>
        <v-card-text class="text--primary">
          <div v-text="card.hours"></div>
          <div v-text="card.keycardInfo"></div>
        </v-card-text>
        <v-card-actions>
            <v-btn color="blue" :href="card.directions" text target="_blank">Directions</v-btn>
          <v-btn color="blue" :to="card.page" text>Learn More</v-btn>
          <v-spacer></v-spacer>
          <v-btn  @click="card.show = !card.show">
            {{ card.show ? 'Hide' : 'Show' }}
          </v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-show="card.show">
            <v-divider></v-divider>
            <v-card-text v-text="card.bottomInfo"></v-card-text>
          </div>
        </v-expand-transition>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</div>
<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>

由于您正在使用 Vuetify，另一种方法是使用扩展面板，我将在下面留下文档 link 供您查看。

https://vuetifyjs.com/en/components/expansion-panels/#usage

Vuetify：如何防止所有扩展转换同时发生？

Vuetify: How do I prevent all expand-transition from happening at once?

javascript

vue.js

vuetify.js