He estado pirateando esto durante días, espero que haya algunos magos Vuetify alrededor.

Aquí está la situación: he renderizado un conjunto de v-expansion-panels y si uno de ellos se expande, también muestra un botón de flecha (display: none se activa haciendo clic en {{X2 }}). Al hacer clic en el botón, mi objetivo es mostrar un cuadro de diálogo.

Problema: Una vez que se abre el cuadro de diálogo con el clic del botón, se invierte la alternancia de visualización del botón. Desaparece tan pronto como hace clic en el botón para abrir un cuadro de diálogo, y aparece de nuevo una vez que se colapsa v-expansion-panel.

Cómo debería ser: El botón de flecha siempre debe estar visible siempre que v-expansion-panel se expanda, independientemente de si se hace clic para ver el diálogo o no.

Aquí hay un codepen que replica e ilustra el problema.

Cualquier idea sería muy apreciada!

0
Anzu Pai 21 abr. 2020 a las 19:35

2 respuestas

La mejor respuesta

Tiene que ver con usar style directamente en el elemento.

Use v-show en lugar de alternar los estilos a mano:

<v-btn v-on="on" class="ml-1" width="36px" v-show="expanded[i]">

Actualice sus datos para mantener una matriz para los paneles

data () {
 return {
  dialog: false,
  expanded: [false, false, false]
 }
}

Y actualice su método toggleMoveUp para actualizar expanded en lugar de usar identificadores HTML.

toggleMoveup(i) {
 this.$set(this.expanded, i, !this.expanded[i])

 this.show=true;
}

Notas:

  • Debe usar Vue.set al actualizar una matriz
  • No debe confiar en los identificadores HTML, si utiliza sus componentes en más de un lugar a la vez, se encontrará con múltiples identificadores.

¿Por qué no funcionó tu enfoque? Supongo que vuetify está actualizando la propiedad de estilo de un elemento, pero no se ocupa de retener los valores ya existentes para que su display:none se borre.

0
Radu Diță 21 abr. 2020 a las 18:09

Publicar una solución con la que ayudó un colega. Esto también funciona con cualquier tamaño de matriz (que es más un escenario de la vida real en aplicaciones web dinámicas). Implementa un gancho de ciclo de vida created() que agrega una propiedad expanded: false a cada elemento de la matriz, que podemos usar para realizar un seguimiento del estado de expansión y alternar la visibilidad del botón. Aquí está el codepen.

Sin embargo, en general, se recomienda en este escenario crear un componente independiente <v-expansion-panels /> y en el componente padre realmente hacer un bucle de los componentes. Eso ya resolvería los problemas de estado por sí solo, ya que cada componente mantiene su propio estado en su alcance.

0
Anzu Pai 23 abr. 2020 a las 07:51