如何从 api 传递数据作为 vuejs 中的道具

Question

I am getting data from api which I want to pass as prop to a child component

Parent component

<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 have gotten the value I need from the api and passed it to data.items

If i display it on the parent component.

It works fine but on the child component

it does not work

Child Component

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

The child components display {{data.items.hubs}} instead of the value of hub

The data from the api

{"data":{"users":1,"incubatees":1,"hubs":2,"investors":1,"events":0,"admins":3,"programs":0}}

Answer 1

After some research

I found out I was not supposed to use {{}}

instead I should do it this way on the parent component

<items name="Hubs" :value="data.items.hubs" bgColor="#d79a2b" />