Estoy usando VueJS 3 junto con vue-router y axios
En la página renderizada no hay ningún elemento dentro de #app:
<div id="app" data-v-app=""><!----></div>Mi ruta:
routes: [ { path: "/:variableToPassTo", component: componentName, props: true }Mi aplicación.vue:
<template> <router-view></router-view> </template>Y el código de script del componente:
<script setup> import axios from "axios" import { onBeforeMount } from "vue" ... let datas = {} const props = defineProps([ ... ]) onBeforeMount(await axios.post('...', ... ).then(function (response) { datas = response.data console.log(datas) }) .catch(function (error) { console.log(error) }) ) </script> Además, en la plantilla de componentes (parte HTML), utilicé la variable de datas
Es obvio que cuando realiza la llamada POST API a través de Axios (que supongo que funciona), la respuesta se solicitará en la Console del navegador que utiliza. Esto significa que puede ver su salida en la ventana de la Console : la respuesta no se procesará (si puedo reconocer esto directamente desde su código), lo que puede activar en su navegador si hace clic con el botón derecho dentro y desde el menú seleccione la opción Inspect . Luego vaya a la pestaña Console , que es la segunda pestaña de izquierda a derecha (la primera pestaña es la pestaña Elements ) y controle la respuesta que regresó de la llamada API. En caso de que desee representar la respuesta en la plantilla, vaya a su componentName nombre del componente y en su plantilla HTML haga algo como esto:
ACTUALIZACIÓN: intente realizar una llamada GET api, porque una llamada GET api siempre devuelve una respuesta. He añadido un fragmento de código mínimo, adáptalo a tus necesidades y dime si funcionó.
principal.js
import App from "./App.vue"; import axios from "axios"; import VueAxios from "vue-axios"; import router from "./router"; axios.defaults.baseURL = "https://yourURL"; // either http or https createApp(App) .use(router) .use(VueAxios, axios) .use(router) .mount("#app");aplicación.vue
<template> <div id="app"> <div class="router-nav"> <router-view /> </div> </div> </template>nombreComponente.vue
<script> export default { name: "ScriptName", data() { return { datas: [] }; }, created() { performApiCall(); }, methods: { async performApiCall() { await this.axios.get("/pathApi").then((result) => { // change pathApi to the path that you use this.datas = result.data.output; // replace output with the signature response of the api response }); } }, } </script> <template> <div> <p> {{ datas }} </p> </div> </template>La respuesta debería aparecer en la plantilla ahora.
Está declarando let datas = {} y luego actualizándolo una vez que axios se resuelve, pero Vue no tiene idea de que ha cambiado.
Debe usar https://vuejs.org/api/reactivity-core.html#reactive ya que está usando la API de composición.