如何使 vuetify 扩展面板独奏？

Question

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/vuetify@2.0.19/dist/vuetify.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/dist/vuetify.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/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

Answer 1

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)
  }

Answer 2

 new Vue({ el: '#app', vuetify: new Vuetify() })

 <link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.19/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/vuetify@2.0.19/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.