Estoy creando un sitio estático usando @nuxt/content y estoy tratando de crear algunos componentes que se usarán desde el descuento. Uno de esos componentes necesita llamar a una API externa para recuperar algunos datos que se muestran en el HTML.
Estos son los fragmentos relevantes, que intentan mostrar una tarjeta con información de un repositorio de GitHub:
blog_articulo.md
In <content-github-repository repo="jgsogo/qt-opengl-cube">this repository</content-github-repository> there is...contenido/github/Repository.vue
<template> <span class=""> <a :href="`https://github.com/${repo}`"> <slot>{{ repo }}</slot> </a> <div>{{ info.description }}</div> </span> </template> <script> export default { props: { repo: { type: String, require: true, }, }, data: () => ({ info: null, }), async fetch() { console.log(`Getting data for repo: ${this.repo}`); this.info = (await this.$axios.get(`https://api.github.com/repos/${this.repo}`)).data; }, }; </script> El error que recibo es Cannot read properties of null (reading 'description') , es como this.info no se completara antes de representar el HTML ... pero se ejecuta, porque obtengo el resultado de console.log. Tal vez no entendí bien los documentos sobre fetch , ¿hay alguna otra forma de lograr este comportamiento?
¡Gracias!
Consulte los documentos aquí . Por lo que parece, Nuxt puede montar el componente antes de que finalice la fetch , por lo que debe protegerse contra la configuración de esos data al acceder a ellos en su componente.
Algo tan simple como lo siguiente debería funcionar:
<template> <span class=""> <a :href="`https://github.com/${repo}`"> <slot>{{ repo }}</slot> </a> <p v-if="$fetchState.pending">Fetching info...</p> <p v-else-if="$fetchState.error">An error occurred :(</p> <div v-else>{{ info.description }}</div> </span> </template>