CODEWITHSUNDEEP
vue.jsvuetify.js
Gecko29
Gecko29

Reputation: 199

Open expansion panels on their creation

Within my application, I have a section containing multiple different expansion panels with each being a separate component. Depending on user input different expansion panels should be shown. It is important that this is done using v-if as opposed to v-show.

I have created the following codepen of a simplified example: https://codesandbox.io/s/awesome-leaf-rne03?file=/src/main.js

The issue I am having is I wish for the panels to be open when they are created. As can be seen in my example, the first created panel is open. However, after hiding and then showing again, the panel is closed. How could I set the expansion panels as being open each time?

Upvotes: 0

Views: 1398

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

For some reason, the panel variable becomes an empty array [] when the <v-expansion-panel/> is removed from the DOM. So when you bring back the </v-expansion-panel/>, there are no opened panels.

But, what you can do is to watch the panel variable and prevent it from having an empty array. Something like this:

data() {return {...}},
watch: {
  panel(newVal) {
    // Check if the expansion panels are not showing.
    if (!(newVal && newVal.length) && !this.showPanel) {
      this.panel = [0]; // back to default if newVal is empty
    }
  }
}

Here is a sample demo.

Upvotes: 2

Related Questions