Proyecto cliente SPA para la API de películas con Nuxt.js

Añadiendo una ventana modal

Con lo que tenemos hasta ahora vamos más que sobrados, pero me pareció interesante ilustraros lo que nos facilita buefy tareas como crear una ventana modal.

La idea es que al hacer clic en la película nos aparezca el resumen en este componente emergente. Esto podría parecer un gran trabajo, pero como cada peli es una instancia del mismo componente es muy fácil de implementar.

Primero necesitamos una variable para controlar si mostrar o no una ventana modal:

components/Peli.vue

data() {
  return {
    isModalActive: false
  };
},

Ahora siguiendo el ejemplo de la documentación de Buefy os facilito el código de la modal, que podemos poner justo debajo del footer de la peli o donde queráis, ya que a fin de cuentas emergerá por encima de todo lo demás:

<!-- Modal para el resumen y año de estreno -->
<b-modal :active.sync="isModalActive">
 <div class="card">
   <div class="card-content">
     <h2 class="title">
       {{ peli.titulo }}
       <small>({{ peli.estreno }})</small>
     </h2>
     <p>{{peli.resumen}}</p>
   </div>
 </div>
</b-modal>

Fijaros en el atributo active:sync, ahí es donde pasamos la variable que controla si mostrar o no la modal; así que como podéis suponer sólo necesitamos añadir el evento clic a algún lado y cambiar su valor de false a true. Ese sitio puede ser la propia imagen de la película:

 <div class="card-image" @click="isModalActive=true">

Si queréis un efecto más chulo podéis añadir un poco de CSS cambiando el cursor a manita tanto en la imagen como en el fondo oscuro de la modal, eso daría una pista al usuario de que puede hacer clic ahí:

.card-image,
.modal-background {
  cursor: pointer !important;
}

Tomaos un descanso porque en la siguiente sección empezamos a darle caña a la API.