0
270
Vistasobtener json api en vueJs registra los resultados pero no muestra nada (soy nuevo con Vue)
Soy nuevo en VueJs, en realidad vengo de reaccionar, el problema que tengo es que cuando busco los datos con un axios.obtengo la consola.log muestra una respuesta exitosa. Pero cuando itero a través de la matriz con v, no se obtiene nada. Es bastante importante, por lo que sería muy apreciado si me puede decir qué estoy haciendo mal o si tiene alguna sugerencia. aquí está el código:
<SignUpForm /> <h1>Countries List</h1 > <div v-for="country in countries" :key="country.name" > <p>{{country.name}}</p> </div> </template> <script> import SignUpForm from "@/components/SignUpForm.vue"; import axios from 'axios' export default{ name: 'SignUpView', components:{ SignUpForm }, data(){ return{ countries: [] } }, async mounted() { const {data} = await axios.get('https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json') console.info(data) this.countries = data } } </script>Puede ver que lo que estoy haciendo actualmente es axios.get en el montado(){} f(x), luego I = los datos a mi Array vacío declarado en data(){}. => Entonces puedo iterar a través de la respuesta json con un v-for en un div.
Aquí está la imagen para que puedas ver: 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Observaciones :
- la lista de países es una cadena y
v-forfunciona si los datos de entrada son una matriz. - El número de objetos en una matriz es
243pero este9251es un conteo de caracteres en una cadena. - Además, si intentaremos convertir eso en un objeto JSON a través
JSON.parse()obteniendoSyntaxError: Unexpected token n in JSON at position 6.
new Vue({ el: "#app", data: { countries: [] }, methods: { getData() { var vm = this; axios.get("https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json") .then(function(response) { console.log(typeof response.data); <---- string console.log(response.data.length); <---- actual objects in an array is 243 but this 9251 is a count of characters in a string. console.log(JSON.parse(response.data)); <---- SyntaxError: Unexpected token n in JSON at position 6 }) .catch(function(error) { alert(error); }); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <div id="app"> <button @click="getData">Click to check Api response</button> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta