:profile-data="profileData"

\r\n

:profileData="profileData"

\r\n\r\n

Elije la forma que más te guste e intenta no mezclar ambos estilos, para mantener la consistencia a lo largo del proyecto. En este caso, usaremos la primera:

\r\n

<MainBlock :profile-data=\"profileData\"/>\r\n

\r\n

Comprobemos que funciona y que el hijo tiene los datos correspondientes. Vamos al navegador, y, si abrimos la consola, vemos que tenemos un error. Seguramente te pase a menudo y vamos a ver como solucionarlo. El error es el siguiente:

\r\n

\r\n

\r\n
Invalid prop: type check failed for prop “profileData”. Expected Object, got Null
\r\n

\r\n

Esto ocurre porque nuestro componente tiene definida la propiedad (profileData) que espera un valor de tipo objeto y le está llegando un null. Nos está avisando.
\r\nPara resolverlo lo que vamos a hacer es indicarle a nuestro componente que se renderice cuando tenga los datos de la API, de esta forma no deberíamos ver el error en consola.

\r\n

El HTML completo del componente Profile (/views/Profile/Index.vue) se vería así:

\r\n

<template>\r\n  <div>\r\n    <BaseLoading v-if=\"isLoading\"/>\r\n    <template v-if=\"profileData !== null\">\r\n      <MainBlock :profile-data=\"profileData\"/>\r\n    </template>\r\n  </div>\r\n</template>\r\n

\r\n

En Vue, podemos usar la etiqueta <template></template> para agrupar contenido dentro. La etiqueta template no renderiza nada en el HTML, por lo que es perfecta para este caso, cuando no queremos añadir una capa (div) extra a nuestro código.

\r\n

\r\n

Ya tenemos los datos cargados en nuestro componente hijo y no tenemos ningún error en consola.

\r\n

MainBlock: Componentes Hijos y CSS

\r\n

Dentro de este componente, como ya vimos en una imagen anteriormente, vamos a crear varios componentes que van a convivir en un Grid de CSS que vamos a crear ahora mismo.

\r\n

Nuestro grid se divide en 2 bloques principales: bloque izquierdo y bloque derecho.

\r\n

En el izquierdo vamos a tener un listado de héroes, los últimos héroes jugados y el progreso en la historia del juego.
En el derecho mostraremos algunas de las estadísticas del jugador como: número de bichos normales y jefes asesinados, tiempo de juego por personaje, etc.

\r\n

Empecemos con el CSS:

\r\n

  .grid-container\r\n    display grid\r\n    grid-template-columns 1fr\r\n\r\n