[Vuejs]-Why does VueJS 3 doesn't render any elements when using axios

by

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.

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.

Leave a comment