1

Hola buenas tardes tengo una pequeña duda intento consumir api pero no puedo ver que se vea en mi template, pero con otra si funciona

<template>
<div>
    <h1>Api</h1>
    <ul v-if="characters">
        <li v-for="character in characters" :key="character.id" :name="character.name">
            <h3>{{ character.name}}</h3>
        </li>            
    </ul>       
</div>
<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Characters',
    setup() {
        const characters = ref(null)
        onMounted(async () => {
        const response = await fetch ("https://rickandmortyapi.com/api/character"); // no funciona
        // const response = await fetch ("https://jsonplaceholder.typicode.com/users"); // si funciona
            characters.value = await response.json();            
        })
        return {characters}
    },
}
</script>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

como podria solucionar esto

1 respuesta 1

2

Creo que tu problema esta en como accedes a los datos del json, en la primera imagen los datos que te interesan ya vienen en la raiz del json, pero en la segunda imagen los datos que te interesan se encuentran en el objeto results, por lo que debes moverte hacia allí

<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Characters',
    setup() {
        let characters = ref(null)
        onMounted(async () => {
        const response = await fetch ("https://rickandmortyapi.com/api/character"); // no funciona
            characters = await response.json()       
        })
        return {characters.results}
    },
}
</script>
2
  • me da error con el return {characters.results} me dice: Parsing error: Unexpected token . Commented el 4 mar. 2021 a las 15:30
  • lo que hice fue en mi ciclo poner esto: v-for="character in characters.results" :key="character.id" así me funciono! Commented el 4 mar. 2021 a las 15:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.