如何使 vuetify 擴展面板獨奏？

Question

如何使vuetify擴展面板只打開一個面板？ 現在，我可以關閉所有有問題的面板。 我想保留最后一個打開的面板以保持打開狀態。

如果單擊打開的面板，我希望無法關閉打開的面板。

 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>

這是我在 CodePen 上的代碼

Answer 1

嘗試這個。 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>

只需添加multiple屬性。