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>

Here is my code on 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属性。

如何使vuetify扩展面板独立？

2 个答案: