Llamo a la API desde mi archivo external.js y luego la llamo dentro de mi componente usando v-for para mostrar los datos requeridos. Durante este proceso, no puedo llamar a la API. Cada vez que recibo un error como axios definido pero nunca usado.
Esta es mi URL de punto final, a la que quiero llamar dentro del archivo data.js: - https://randomuser.me/api/
Problema al intentar llamar a la API desde el archivo external.js en Vuejs
Código funcionando:- https://codesandbox.io/s/blissful-northcutt-wze8i?file=/src/components/data.js
datos.js
export default { methods: { mydata() { axios.get("https://randomuser.me/api/").then((response) => this.response); } } };HolaMundo.vue
<template> <div> <div v-for="list in lists" :key="list.id"> {{ list.name }}<br />{{ list.location }} </div> </div> </template> <script> import axios from "axios"; import { mydata } from "./data"; export default { name: "HelloWorld", data() { return { lists: mydata, }; }, }; </script>Primero, debe exportar la función de la manera más simple:
import axios from "axios"; export const mydata = () => { return axios.get("https://randomuser.me/api/").then((response) => response); } Recuerde importar axios en su archivo js externo porque lo usa allí, no en el archivo de componentes.
En segundo lugar, su API devolverá Promesa, por lo que debe esperar el resultado; puede hacerlo llamando a la API en el método mounted y completando la list de propiedades cuando esté lista.
<template> <div> <div v-for="list in lists" :key="list.id.value"> {{ list.name.title }} {{ list.name.first }} <br />{{ list.location.country }} </div> </div> </template> <script> import { mydata } from "./data"; export default { name: "HelloWorld", data() { return { lists: [], }; }, mounted() { mydata().then(r => { this.lists = r.data.results }); } }; </script>Por último, pero no menos importante, un objeto devuelto por la API es un poco diferente de lo que espera, por lo que ajusté el código html para el caso real.
Puede llamar a la API de punto final usando Axios como este.
<template> <div> <div v-for="user in users" :key="user .id"> {{ user.name }}<br />{{ user.username}} </div> </div> </template> <script> import axios from "axios"; // import { mydata } from "./data"; export default { name: "HelloWorld", data() { return { // lists: mydata, users: [] }; }, mounted () { axios .get('https://jsonplaceholder.typicode.com/users/2') .then(response => (this.users = response)) .catch(error => console.log(error)) } }; </script>