why all expansion cards open on a click?

Question

js with vuetify and vuex for getting my data from API. I have a timeline component with the expansion card in it when I click on expansion icon all my cards in timeline get open but I want to open just that specific one I have clicked.

allAnnouncementList is a state that I get from my vuex api and there is no problem in showing my data.

my template is:

  <v-timeline
                :reverse="reverse"
                :dense="dense"
        >
            <v-timeline-item
                    v-for="item in allAnnouncementList"
                    :key="item"
                    :left="left"
                    :right="right"
                    class="font-persian"
            >
                <v-card
                        class="mx-auto"
                        max-width="344"
                >
                    <v-card-title class="headline primary white&#45;&#45;text" dir="rtl">
                        {{item.title}}
                    </v-card-title>

                    <v-card-actions>
                        <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-html="item.body">
                                {{item.body}}
                            </v-card-text>
                        </div>
                    </v-expand-transition>
                </v-card>
            </v-timeline-item>
        </v-timeline>

my script is:

export default {
        name: "AnnouncementCom",
        components: {},
        data() {
            return {
                page: 1,
                show: false,
            }
        },

    }

Answer 1

With this <div v-show="show"> all your divs look for same condition to show up or hide. You need to unify each condition. You can achieve this with using index with v-for like below :

export default {
        name: "AnnouncementCom",
        components: {},
        data() {
            return {
                page: 1,
                selectedIndex: null,
            }
        },

    }

<v-timeline :reverse="reverse" :dense="dense">
  <v-timeline-item v-for="(item,index) in allAnnouncementList" :key="item" :left="left" :right="right" class="font-persian">
    <v-card class="mx-auto" max-width="344">
      <v-card-title class="headline primary white&#45;&#45;text" dir="rtl">
        {{item.title}}
      </v-card-title>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn icon @click="selectedIndex = index">
          <v-icon>
          {{ index === selectedIndex ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
          </v-icon>
        </v-btn>
      </v-card-actions>
      <v-expand-transition>
        <div v-show="index === selectedIndex">
          <v-divider></v-divider>
          <v-card-text v-html="item.body">
            {{item.body}}
          </v-card-text>
        </div>
      </v-expand-transition>
    </v-card>
  </v-timeline-item>
</v-timeline>

Also need to mention that this will allow only 1 item to be shown. If you want to display more than 1 item you need to use an array.