CODEWITHSUNDEEP
vuetify.js
Vincent Desrosiers
Vincent Desrosiers

Reputation: 170

previous v-expansion-panel not closing when another one is opened

From what I've seen it should close without adding anything special but every time I click on another expandable item the previous one doesn't close.

<template>
  <div d-flex p-0 m-0>
    <div mb-3>
      <div v-for="item in items" :key="item.Id">
        <div v-if="item.HasChildren === true">
          <div
            class="scanList pa-2 font-weight-light"
            v-ripple="{ class: 'success--text' }"
            @click="swapComponent(item)"
          >
            {{ item.Name }}
          </div>
        </div>
        <div v-else-if="item.HasChildren === false">
          <v-expansion-panel>
            <v-expansion-panel-content>
              <template v-slot:header>
                <div>{{ item.Name }}</div>
              </template>
              <v-card>
                <QR justify-center :value="item.Id"></QR>
              </v-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </div>
      </div>
      <div v-if="model != null && model.HasChildren === false">
        <v-card>
          <template v-slot:header>
            <div>{{ item.FullPathName }}</div>
          </template>
          <QR justify-center :value="model.Id"></QR>
        </v-card>
      </div>
    </div>
    <div v-if="items !== initialItems">
      <div class="backButton" @click="swapPrevious()">
        <v-icon class="arrow">fa-arrow-left</v-icon>
      </div>
    </div>
  </div>
</template>

I'm on Vuetify 1.5. Thanks for the help.

Upvotes: 1

Views: 548

Answers (1)

chans
chans

Reputation: 5260

You are trying to create a separate expansion panel in the loop and its independent, explicitly we can define a logic to close the other panels

Working codepen here (using vuetify 1.5x)

Changes for HTML:

  1. Added a event trigger on wrapper around expansion panel.

  2. Added v-model for each expansion panel.

    <div v-else-if="item.HasChildren === false" @click="closeOtherPanel(item.Id)">
  <v-expansion-panel v-model="panel[item.Id]">
    <v-expansion-panel-content>
      <template v-slot:header>
        <div>{{ item.Name }}</div>
      </template>
      <v-card>
        <QR justify-center :value="item.Id"></QR>
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</div>

Changes for script:

  1. Add panel property inside data object.

  2. Add a method to close other panels

    data: {
  panel: {},
},
methods: {
  closeOtherPanel(id) {
    var self = this;
    Object.keys(this.panel).map(x => {
      if (x != id) self.panel[x] = null;
    });
  }
}

Upvotes: 1

Related Questions