[Vuejs]-All v-card expanding while clicking on one

by

1👍

✅

It is a CSS issue: your <v-card> component is growing to the full height of the flex row as long as one or more components in the same row has increased in height.

A quick solution will be to ensure that you have height="fit-content" set on your component:

<v-card
  class="card-class"
  elevation="1"
  height="fit-content"
  v-for="(item, $index) in experience"
  :key="$index"
>

See a working example on your forked CodeSandbox: https://codesandbox.io/s/keen-ganguly-qg9uyu?file=/src/App.vue

👤Terry

0👍

Solution: You need to wrap the v-card in a div. And v-for in the div tag.
Exp:

<div v-for="item in list" :key="index">
     <v-card class="card-class">
        <v-btn icon @click.stop="item.show = !item.show">
              <v-icon>{{
                item.show ? "mdi-chevron-up" : "mdi-chevron-down"
              }}</v-icon>
            </v-btn>
     </v-card>
</div>
👤Johnny Dat

Leave a comment