Home » vue » How to make vuetify expansion panel to be solo?

How to make vuetify expansion panel to be solo?

Posted by: admin November 26, 2021 Leave a comment

Questions:

How to make vuetify expansion panel to open only one panel? right now, I can close all the panels which is a problem. I want to have stay the last panel which opened to stay open.

I want to be not able to close the opened panel if I clicked on the opend panel.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

Here is my code on CodePen

Answers:

Try this.
https://codepen.io/kdydesign/pen/BaBeeVO?editors=1011

<v-expansion-panels v-model="panel">
  <v-expansion-panel
        v-for="(item,i) in 5"
        :key="i"
        @click="expanded(i)"
  >
     ......
  </v-expansion-panel>
</v-expansion-panels>
data () {
  return {
    panel: []
  }
},
methods: {
  expanded (index) {
    this.panel = []
    this.panel.push(index)
  }

###

new Vue({
  el: '#app',
  vuetify: new Vuetify()
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-expansion-panels accordion multiple>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </v-row>
  </v-app>
</div>

Just add a multiple attribute.