My current task involves retrieving data from an API and passing it as a prop to a child component.
In the parent component, I have the following code:
<template>
<div class="dashboard">
<items name="Admins" value={{data.items.hubs}} bgColor="#a80c0c" />
</div>
</template>
import Items from './Items.vue'
import { Admin } from '@/services/AdminService';
export default {
name: "AdminDashboard",
components: {
Items
},
setup(){
onMounted(() => {
showLoader(true);
Admin.getDashboardItems()
.then((response) => {
data.items = response.data.data
})
.catch((error) => {
})
.finally(() => {
showLoader(false);
});
});
return {
data
}
}
}
I successfully retrieved the necessary value from the API and stored it in data.items.
However, when trying to display this value in the child component, there seems to be an issue.
The child component looks like this:
<template>
<div class="col-md-3">
<div class="items" :style="{ backgroundColor: bgColor }">
<div class="d-flex space-between">
<div></div>
<div>
<h5>{{ value }}</h5>
<span>{{ name }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Items",
props: ["bgColor", "value", "name"]
}
</script>
Instead of displaying the actual hub value, the child component outputs {{data.items.hubs}}.
Here is a snippet of the data obtained from the API:
{"data":{"users":1,"incubatees":1,"hubs":2,"investors":1,"events":0,"admins":3,"programs":0}}