vue.js how to call multiple url data in single axios

Question

i am trying get multiple url data in single axios. i already added single url but i want to add another url.

i tired this but it giving null object error

import axios from "axios"; export default { data() { return { businesslists: [], Userslist: [], }; }, async asyncData({ $axios }) { let { datas } = await $axios.$get("/Userslist"); return { Userslist: datas, }; }, computed: { UserCount() { return Object.keys(this.Userslist).length; }, }, async asyncData({ $axios }) { let { data } = await $axios.$get("/Businessregisterlist"); return { businesslists: data, }; }, computed: { BusinessCount() { return Object.keys(this.businesslists).length; }, }, };

i want to show like this

<p>{{ BusinessCount }}</p> 
<p>{{ UserCount }}</p>

1st url

/Businessregisterlist

2nd url

/Userlist

my code

<template>
<p>{{ BusinessCount }}</p>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      BusinessCounts: [],
    };
  },
async asyncData({ $axios }) {
    let { datad } = await $axios.$get("/Businessregisterlist");
   return {
      BusinessCounts: datad,
    };
  },
  computed: {
    BusinessCount() {
      return Object.keys(this.BusinessCounts).length;
    },
  },
};
</script>

You mean you want to make another call to the server? Why not copy the line with the first call and change the variable name and URL? — Maarten Veerman
@Maarten Veerman Cannot convert undefined or null to object return Object.keys(this.BusinessCounts).length; — user12380208
But what does thuis have to do with your question about a second URL. Please update the code in your question to match the situation with 2 URLs. — Maarten Veerman

Maarten Veerman Maarten Veerman · Accepted Answer · 2020-10-17T18:31:29

In your tried code you define the asyncData function 2 times. That's incorrect. But you can make 2 calls to the server in a single asyncData function.

Try:

async asyncData({ $axios }) {
    let { datad } = await $axios.$get("/Businessregisterlist");
    let { dataUsers } = await $axios.$get("/Userslist");
   return {
      Businesslist: datad,
      Userslist: dataUsers
    };
  },
computed: {
    BusinessCount() {
      return Object.keys(this.Businesslist).length;
    },
    UserCount() {
      return Object.keys(this.Userslist).length;
    },
  },

Make sure you correctly define the Businesslist and Userslist in the data section.

vue.js how to call multiple url data in single axios

1 Answers