web-dev-qa-db-fra.com

Comment développer V-EXPANSION Panel par défaut avec VUE / VUETY?

J'aimerais avoir un panneau d'expansion <v-expansion-panel> Ouvrez par défaut sur la charge de la page, mais ne peut pas le comprendre. Je sais pour Angular, vous avez mis [expansé] = "vrai", mais cela ne fonctionne pas avec VUE. Je n'ai pas eu de chance nulle part de trouver cette réponse. Je ne sais pas si JavaScript est nécessaire ou non, ou si cela peut être fait correctement dans le <v-expansion-panel> étiqueter.

J'ai essayé <v-expansion-panel [expanded]="true" Et cela a montré les boutons qui sont dans cette section, mais c'est tout.

<section>
   <v-app>
      <v-expansion-panel
         v-model="search"
         expand
      >
.
.
.
   </v-app>
</section>
vue.jsvuetify.js
4
ziggybrew

Regardez la section des accessoires sur la documentation:

https://vuetiquementjs.com/fr/comPonents/expansion-panels#expansion-panel

Le Développer PROP SAA: Laisse le panneau d'expansion ouvert lors de la sélection d'un autre.

Ce n'est pas ce que tu veux.

Vous devez utiliser Valeur Prop: Contrôle l'état de contenu ouvert/fermé dans le panneau d'extension. Correspond à un indice zéro du contenu actuellement ouvert. Si Développer Prop est utilisé, il s'agit d'un tableau de booléens où l'index correspond à l'index du contenu.

Donc, dans votre cas:

<section>
 <v-app>
  <v-expansion-panel
     v-model="search"
     value="0"
  >
  .
  .
  .
  </v-app>
</section>

Où "0" est l'indice du panneau d'expansion élargi par défaut.

J'ai fait un exemple ici:

https://codepen.io/anon/pen/pmqyop?&editable=true&editors=101#anon-login

1
Nacho Moço