Vue - передача результата запроса apollo от родительского к дочернему компоненту - PullRequest
Новая
       10

Vue - передача результата запроса apollo от родительского к дочернему компоненту

1 голос
/ 07 мая 2019

У меня есть родительский компонент, который вызывает этот запрос 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 здесь бросает

Невозможно прочитать свойство 'length' из неопределенного

пока работает 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>

Чего мне не хватает?

1 Ответ

1 голос
/ 08 мая 2019

Либо ваш запрос 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>
...