Why does VueJS 3 doesn't render any elements when using axios

Question

I'm using VueJS 3 together with vue-router and axios

In the rendered page there aren't any elements inside #app:

<div id="app" data-v-app=""><!----></div>

My route:

routes: [
    {
        path: "/:variableToPassTo",
        component: componentName,
        props: true
    }

My App.vue:

<template>
  <router-view></router-view>
</template>

And component script code:

<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>

Also, in component template (HTML part), I used the datas variable

BWappsAndmore · Accepted Answer · 2022-02-25 07:58:50Z

0

It's obvious that when you perform the POST API-call via Axios (which I assume that works), the response of it will be prompted in the Console of the browser that you use. This means that you can see your output in the Console window - the response won't be rendered (if I can recognize this right from your code well), which you can activate in your browser if you right-click inside it and from the menu choose the Inspect option. Then go to the Console tab which is the second tab from left to right (the first tab is the Elements tab) and control the response that came back from the api call. In case you want to render the response in the template, then go to your componentName component and in your HTML-template do something like this:

UPDATE: Try to perform a GET api call, because a GET api call always returns a response. I've added a minimal code snippet, adapt it to your needs and tell me if it worked.

main.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");

App.vue

<template>
  <div id="app">
    <div class="router-nav">
      <router-view />
    </div>
  </div>
</template>

componentName.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>

The response should be rendered in the template now.

edited Feb 25, 2022 at 7:58

answered Feb 23, 2022 at 20:07

BWappsAndmore

5314 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vueprogrammer Over a year ago

Thanks, for your answer, the problem is that I'm using that method and everything looks perfect; but still I don't get any output in div#app

BWappsAndmore Over a year ago

@vueprogrammer please see my updated answer and let me know if you have further questions

quadmachine · Accepted Answer · 2022-02-28 12:30:16Z

0

You are declaring let datas = {} and then updating it once axios resolves, but Vue has no idea it has changed.

You should use https://vuejs.org/api/reactivity-core.html#reactive since you're using composition API.

answered Feb 28, 2022 at 12:30

quadmachine

2522 silver badges7 bronze badges

Collectives™ on Stack Overflow

Why does VueJS 3 doesn't render any elements when using axios

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related