Automatically trigger the expansion of all panels within Vuetify using code

Question

Automatically trigger the expansion of all panels within Vuetify using code

I'm attempting to use Vuetify 2.3.5 to programmatically control the opening and closing of expansion panels.

<v-expansion-panels accordion>
    <v-expansion-panel v-for="(item,i) in faqs" :key="i">
        <div class="expansion-panel-header-container">
            <div class="handle"><v-icon>$drag_icon</v-icon></div>
            <v-expansion-panel-header hide-actions expand-icon="$edit">
                <span class="font-weight-bold">{{item.question}}</span>
            </v-expansion-panel-header>
            <div class="action-icons">
                <v-icon @click.native="doSomething">$edit</v-icon>
                <v-icon>$delete</v-icon>
            </div>
        </div>
    <v-expansion-panel-content>
        CONTENT GOES HERE
    </v-expansion-panel-content>
<v-expansion-panels accordion>

At the moment, clicking anywhere on the v-expansion-panel-header triggers the panel to open and close. I want to specifically trigger this action by clicking on

<v-icon @click.native="doSomething">$edit</v-icon>

instead.

Unfortunately, there doesn't seem to be any documentation available on how to achieve this.

If anyone has any insights on how I could implement this feature, I'd greatly appreciate it!

javascript vue.js vuetify.js

Answer 1

Answer №1

To implement the functionality of closing all panels, simply introduce a v-model to your code. By setting the value of the model to null, all panels will be closed simultaneously:

<v-expansion-panels v-model="openedPanel" accordion>
  ...

data () {
  return {
    openedPanel: null
  }
},
methods: {
  closeAllPanels () {
    this.openedPanel = null
  },
  openPanel (index) {
    this.openedPanel = index
  }
}

If your requirement involves the ability to have multiple panels open at once, you can use an array instead:

<v-expansion-panels v-model="openedPanel" multiple accordion>
  ...

data () {
  return {
    openedPanel: []
  }
},
methods: {
  closeAllPanels () {
    this.openedPanel = []
  },
  openPanel (index) {
    this.openedPanel.push(index)
  },
  closePanel (index) {
    this.openedPanel.splice(index, 1)
  }
}

Answer 2

To implement the functionality of closing all panels, simply introduce a v-model to your code. By setting the value of the model to null, all panels will be closed simultaneously:

<v-expansion-panels v-model="openedPanel" accordion>
  ...

data () {
  return {
    openedPanel: null
  }
},
methods: {
  closeAllPanels () {
    this.openedPanel = null
  },
  openPanel (index) {
    this.openedPanel = index
  }
}

If your requirement involves the ability to have multiple panels open at once, you can use an array instead:

<v-expansion-panels v-model="openedPanel" multiple accordion>
  ...

data () {
  return {
    openedPanel: []
  }
},
methods: {
  closeAllPanels () {
    this.openedPanel = []
  },
  openPanel (index) {
    this.openedPanel.push(index)
  },
  closePanel (index) {
    this.openedPanel.splice(index, 1)
  }
}

Automatically trigger the expansion of all panels within Vuetify using code

Answer №1

Similar questions

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Embed Socket.IO into the head tag of the HTML document

Utilizing inter-process communication in Electron to establish a global variable from the renderer process

The complexities of stopPropagation() causing further confusion

What is the best method for deleting scripts to optimize for mobile responsiveness?

Trigger oncopy on the body excluding specific class

Tips on preventing repeated data fetching logic in Next.js App Routes

Why is it that a specific variable is only undefined in one specific location within the entire component?

Error in jQuery validation caused by a different value

Transferring data between two functions within a React.js application

Accordion featuring collapsible sections

Making a REST API call with an ID parameter using Angular

Getting just the main nodes from Firebase using Angularfire

Automatically hide a label after a certain amount of time following a button click

When importing my Vue components using NPM, I can only locate the modules if they are situated within the src directory, rather than in the

Transform User's Regex Output into Uppercase

How can we avoid multiple taps on Ext.Button in Sencha Touch?

The method hasOwnProperty does not function as intended

Tips for combining two htmlelements together

Fetch data dynamically upon scrolling using an AJAX request