如何从 api 传递数据作为 vuejs 中的 prop答案

【问题标题】：how to pass data from api as prop in vuejs如何从 api 传递数据作为 vuejs 中的 prop
【发布时间】：2022-01-08 09:56:16
【问题描述】：

我正在从 api 获取数据，我想将其作为 prop 传递给子组件

父组件

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

    }
}

我已经从 api 中获得了我需要的值并将其传递给 data.items

如果我在父组件上显示它。

它工作正常，但在子组件上

没用

子组件

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

子组件显示 {{data.items.hubs}} 而不是 hub 的值

来自 api 的数据

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

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

经过一番研究

我发现我不应该使用 {{}}

我应该在父组件上这样做

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

【讨论】：