Vue - 将阿波罗查询结果从父组件传递给子组件

Question

我有一个调用这个 apollo 查询的父组件：

<template>
        <div class="row" style="flex-wrap: nowrap; width:102%">
            <BusinessContextTeamPanel :business_contexts="business_contexts"></BusinessContextTeamPanel></BusinessContextTeamDetailPanel>
        </div>
</template>
    <script>
        apollo: {
                    business_contexts: {
                        query: gql`query ($businessContextId: uuid!) {
                           business_contexts(where: {id: {_eq: $businessContextId }}) {
                               id
                               businessContextTeams {
                                 id
                                 team {
                                   name
                                   id
                                 }
                                 role
                               }
                           }
                         }`,
                        variables: function() {
                            return {
                                businessContextId: this.currentContextId
                            }
                        }
                    }
                },
    </script>

我的子组件（BusinessContextTeamPanel）获取输入道具并像这样使用它：

<template>
    <div v-if="business_contexts.length > 0">
        <div v-for="teams in business_contexts" :key="teams.id">
                        <div v-for="team in teams.businessContextTeams" :key="team.id" style="padding-top: 20px;min-width: 400px">
                            <div style="height: 25px; color: #83d6c0;">

                                <div style="width: 7%; font-size: 10px; float: left; padding-top: 8px; cursor: pointer;" class="fa fa-minus-circle" ></div>

                                <div style="width: 50%; float: left; padding-right: 10px;">
                                    <div class="gov-team-text" @click="editTeam(team)">{{ team.team.name }}</div>
                                </div>

                                <div style="width: auto; float: right;">
                                    <b-badge variant="light">{{ team.role }}</b-badge>
                                </div>
                                <div style="width: 45%; margin-left: 4%; float: right;">
                                </div>
                            </div>
                            <div style="clear: both; margin-bottom: 15px;"></div>
                        </div>

                    </div>
    </div>
</template>

v-if 这里抛出

无法读取未定义的属性“长度”

v-for 有效。 当我尝试在子组件挂载钩子上调用的子方法（loadData()）中使用道具时，我也会得到undefined

<script>
    import Treeselect from '@riophae/vue-treeselect';
    import _ from "lodash";


    export default {
        name: "BusinessContextTeamPanel",
        components: { Treeselect },
        props: ['business_contexts'],
        data() {
            return {
                itemModel: {},
                allRoles: [],
                formTitle: "",
                filteredTeams: [],
                showNoTeamMsg: false
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                let roles = [];
                _.forEach(["Admin", "Contributor", "Owner", "Master", "Viewer", "User"], function (role) {
                    roles.push({id: role, label: role});
                });
                console.log(this.business_contexts); // here I get undefined
                this.allRoles = roles;
                this.showNoTeamMsg = this.business_contexts.length === 0;
            }
        }
    }
</script>

我错过了什么？

Answer 1

要么你的 apollo 查询不工作，要么它没有及时准备好让子组件尝试使用它。

为了调试，在父组件的模板中添加 {{ business_contexts }}，这样你就可以看到它了。这将确认查询是否有效。

如果查询正常，则可能是您的子组件在数据准备好之前尝试访问数据。改变你的 v-if 从

<div v-if="business_contexts.length > 0">

到

<div v-if="business_contexts && business_contexts.length > 0">

编辑：更好的是，将父组件更改为根本不尝试加载子组件，直到父组件拥有数据：

<BusinessContextTeamPanel v-if="business_contexts" :business_contexts="business_contexts"></BusinessContextTeamPanel></BusinessContextTeamDetailPanel>