HelloWorld.vue
<template>
<div>
<div v-for="name in names" :key="name.PipelineID">
<div>status: {{ name.OverallStatus }}</div>
</div>
<div v-for="item in items" :key="item.SourceDatabaseName">
{{ item.DBIcon }}
</div>
</div>
</template>
<script>
import { tabsandcontent } from "./tabsandcontent";
import { tabs } from "./tabs";
export default {
name: "HelloWorld",
components: {},
data() {
return {
names: [],
items: [],
};
},
mounted() {
tabsandcontent().then((r) => {
this.names = r.data;
});
tabs().then((r) => {
this.items = r.data;
});
},
};
</script>tabsandcontent.js
import axios from "axios";
export const tabsandcontent = (name) =>
axios.get(
"http://35.162.202.237:3000/pip?s_name=" + name **(api call edited for safety purpose, exact api call in codesandbox)**
);code:-
https://codesandbox.io/s/angry-euler-xt2wqh?file=/src/components/tabsandcontent.js
in tabsandcontent.js file, i have api call where i need to pass the name as query params at the end of the api url.
Then only i can able to call the api and get the response.
I tried writting above code logic, But it gives me like undefined when i pass name as params at the url end.
How to call api, that which has name as the query params?
In developer tools inside network tab. i am getting as