使用 Apollo + Vue 进行异步调用

Question

目前，我正在尝试从我的服务器获取数据，但我遇到的问题是数据需要一点时间来获取（在邮递员中虽然它是瞬时的），比获取 DOM 的时间要长安装/加载，因此我得到错误（数据未定义）并且没有任何内容会加载到 DOM。

如果我在 DOM 完成挂载后 console.log 数据，那么我可以在控制台中看到它，但我无法找到解决方法，让组件等待数据被获取。

我尝试使用 v-if 语句，并以几种不同的方式编写它，但我仍然收到未定义数据的错误，并且在查询完成获取后它也不会加载。目前我已经将数据设置为首先等于null，它在JS中实际上是一个对象，并且在获取完成后它确实会填充数据。我可以在控制台中看到这一点。在此之前，我尝试了一个简单的 v-if="GameWeek"，并将 GameWeek 定义为一个空对象和一个空数组，但是这些都不起作用，并强制组件等待数据完成获取。

我的问题是，有什么方法可以异步执行此操作，或者更好的是，让组件等到数据被提取后再正确加载到 DOM 中？

这是我的组件的样子：

<template>
    <!--  Highest climber & longest fall -->
    <v-container>
        <v-card class="card-container mx-auto" v-if="GameWeek !== null" :v-for="player in GameWeek" :key="player.player_id">
            <!-- Top part of card -->
             <v-list-item three-line>
                <v-list-item-content>
                    <div class="card_top_section">
                        <v-avatar>
                            <img
                                src="https://cdn.vuetifyjs.com/images/john.jpg"
                                alt="John"
                            >
                        </v-avatar>
                        <div class="ml-3">
                            <p class="cardText player_name">
                                {{  player.player_name  }}
                            </p>
                            <p class="cardText team_name">
                                {{ player.team_name }}
                            </p>
                        </div>
                    </div>
                    
                    <div class="card_divs mt-7">
                        <p class="cardText points">
                        Points this week {{ player.points }}
                        </p>
                       <!--  <p class="points_green points">
                            
                        </p> -->
                    </div>
                   <!--  Second Row Card -->
                    <div class="card_divs bottom_line">
                        <p class="cardText points">
                            Total points {{ player.total }}
                        </p>
                       <!--  <p class="points_green points">
                            
                        </p> -->
                    </div>
                    
                </v-list-item-content>
             </v-list-item>
        </v-card>
    </v-container>      
</template>

<script>
    import gql from 'graphql-tag'
    export default {
        name: 'PlayerCard',
        data: () => {
            return {
                GameWeek: null
            }
        },
        apollo: {
            GameWeek: gql`query GameWeek {
                GameWeek {
                    team_id
                    points
                    player_name
                    rank
                    previous_rank
                    total
                    player_id
                    team_name
                }
            }`
        },
        mounted() {
            console.log('This is the gameweek', this.GameWeek)
        },
    }
</script>

Answer 1

好吧，事实证明，一旦我发现问题，这很容易解决。

它是 v-for 语句前面的 :。一旦删除它就一切正常:)