[Vuejs]-How to force collapse all expansion panels?

by

1👍

✅

Expansion panels can be controlled externally by modifying the
v-model. Its value corresponds to a zero-based index of the currently
opened expansion panel content. If multiple props are used then it is an
array containing the indices of the open items.

  1. To control the opening and closing status of multiple panels
    https://codepen.io/pen?&editors=101

  2. If need to control only a single expansion panel then use this-

<template>
  <v-expansion-panels v-model="panel">
     // any code here
  </v-expansion-panels>
  <button @click="closePanel()">Close</button>
</template>
<script>
export default {
  data() {
    return {
      panel: 0 // This means should open by default
    }
  },
  methods: {
    closePanel() {
      this.panel = null; // null is to close the panel
    }
  }
}
</script>
👤Neha Soni

Leave a comment