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

Dynamic Font Formatting in Rails Table Based on Conditions

What is the most effective way to transfer data from a child component to a parent component when the child component contains multiple input fields?

Guide to obtaining scope within a nested directive

Obtaining the pathname in a NextJS file like _document.js is a matter of accessing

If I do not specify whether a variable is declared using var or let, what will be its scope?

When attempting to upload a file in Vue Apollo, a Node crash occurs with the error message "Maximum call stack size

What is the method for obtaining access to a variable with two levels of nesting?

React JS routes function properly only upon being reloaded

Blank white screen in Three.js following the rendering of numerous objects

Nuxt - displaying HTML exclusively on the server side

Struggling to dynamically fill the table with Ajax Json data

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Issue where CSS modal does not appear when clicked after being toggled

When the visitor is browsing a particular page and comes across a div element, carry out a specific action

What could be causing the parameters to be empty in Next.js static site generation with getStaticProps?

Easy jQuery Mobile and AJAX login solution

How can I hover over multiple cells in a table?

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

A simple guide on passing a variable from Node.js to the view

Utilizing base classes in callbacks with ES6 in NodeJS