Abra un cuadro de diálogo Vuetify desde una plantilla de componente en VueJS

Después de de esta larga búsqueda de datos hemos podido solucionar esta pregunta que tienen muchos de nuestros usuarios. Te regalamos la solución y nuestro deseo es serte de gran apoyo.

Solución:

No se necesita bus de eventos y modelo v

Actualizar:

Cuando respondí esto por primera vez, publiqué mi respuesta como una “solución alternativa”, ya que no se sentía completamente “correcta” en ese momento y era nuevo en Vue.js. Quería abrir o cerrar el cuadro de diálogo usando un modelo v directiva, pero no pude llegar allí. Después de un tiempo encontré cómo hacer esto en los documentos, usando el evento de entrada y el propiedad de valory así es como creo que debería hacerse sin un bus de eventos.

Componente principal:

Componente hijo (ScheduleForm):

Respuesta original:

Pude solucionar esto sin la necesidad de un bus de eventos global.

Usé una propiedad calculada con un getter Y un setter. Dado que Vue le advierte sobre la mutación de la propiedad principal directamente, en el setter simplemente emití un evento al padre.

Aquí está el código:

Componente principal:

Componente hijo (ScheduleForm):

Hay muchas maneras de hacerlo, como Vuex, Event Bus, Props con los que puede administrar si el modal debe abrirse o cerrarse. Le mostraré mi forma favorita usando el .sync modificador:

Primero simplificaré tu pregunta (la parte del código)

Componente principal

Componente secundario (diálogo)

Ejemplo de trabajo mínimo simple

códec

Pasar value apoyar como value para v-dialog componente, y desde el diálogo secundario emiten input evento cada vez que quieras cerrarlo:

//CustomDialog.vue

  Close

...
props:['value']

y agregue v-model a su padre

//Parent.vue

Así que no hay bus de eventos personalizado, no datano watchno computed.

Comentarios y puntuaciones

Si te sientes suscitado, puedes dejar una crónica acerca de qué te ha gustado de esta crónica.

---

---

Utiliza Nuestro Buscador