0
265
VistasNo se puede acceder a la clave desde una API en Nuxt
Soy bastante nuevo en Nuxt JS. Sigo tutoriales sobre nuxt js y no puedo mostrar un {{planet.title}} en mi página. Pero si uso {{$data}} veo todos los planetas. quiero el titulo del nombre del planeta que tengo en el slug (aqui es tierra pero puede ser júpiter o marte)
_slug.vue
<template> <div class="container"> <div> <NuxtLogo /> <h1 class="title">planet.title here => {{ planet.title }}</h1> <pre> $data here => {{ $data }}</pre> </div> </div> </template> <script> import NuxtLogo from "~/components/NuxtLogo"; export default { components: {NuxtLogo}, async asyncData() { const planet = await fetch( 'https://api.nuxtjs.dev/planets' ).then((res) => res.json()) return { planet } } } </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; } </style>Mi Pagina Web:
3 Respuestas
Responde la pregunta0
Así es como puedes mejorar tu código
<template> <div class="container"> <div> <NuxtLogo /> <h1 class="title">planet.title here => {{ planet.title }}</h1> <pre> $data here => {{ $data }}</pre> <section> <div v-for="planet in planets" :key="planet.slug"> <p>Title of my planet: {{ planet.title }}</p> </div> </section> </div> </div> </template> <script> export default { async asyncData() { const call = await fetch('https://api.nuxtjs.dev/planets') const planets = await call.json() return { planets } } } </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; } </style> PD: no olvides la :key .
La API devuelve una matriz. Si quieres acceder al title del primer planeta, usa planet[0].title .
Por supuesto, también puede hacer un bucle en toda la matriz con v-for . Más información aquí: https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for
0
planet como puede ver cuando muestra la variable $data es una matriz de planetas.
Debe cambiar el nombre de la variable planet a planets para que represente mejor su contenido.
Para mostrar un planeta, debe obtenerlo de la matriz de planets :
<template> <div class="container"> <div> <NuxtLogo /> <h1 class="title">earth.title here => {{ earth.title }}</h1> </div> </div> </template> <script> import NuxtLogo from "~/components/NuxtLogo"; export default { components: {NuxtLogo}, async asyncData() { const planets = await fetch('https://api.nuxtjs.dev/planets') .then((res) => res.json()) const earth = planets[0]; return { planets, earth } } } </script>0
Parece que Planet es una matriz, por lo que debe iterar sobre la matriz y luego imprimir los valores que desea para esa matriz, intente con
<ul> <li v-for="item in planets"> {{ item.title}} </li> </ul>