CODEWITHSUNDEEP
vue.jsvuetify.js
Carlos Sá
Carlos Sá

Reputation: 27

How to disable a single v-expansion-header

(I'm using Vue 2.6) - I read the documentation on v-expansion-panels on vuetify which says it has disabled property to set, but it sets the whole v-expansion-panel disabled, and I want to disable a single v-expansion occurency or more, because I use a for to fill all expansion panels, like 10 occurencies for example, and I want to disable the occurency that has a certain condition. Can someone help? I already tried to use @click.stop inside expansion header, expansion content, but it does not work. I wanted to do like this. On number === 1, don't expand. Or I could even execute a function to return a false, and a message on screen.

<v-expansion-panels>
 <v-expansion-panel
  @click.stop="number === 1"
 >
  <v-expansion-header />  
  <v-expansion-content />
 </v-expansion-panel>
</v-expansion-panels>

Upvotes: 0

Views: 1350

Answers (1)

MAdEfACr
MAdEfACr

Reputation: 733

The v-expansion-panel takes a disabled prop and you can use with a condition to select the panel you want to disable.

<v-expansion-panel
  v-for="(item,i) in 5"
  :key="i"
  :disabled="i === 2"
>

API reference: https://vuetifyjs.com/en/api/v-expansion-panel/

Upvotes: 1

Related Questions