zerogpm's avatar

Best way to pass props with network call?

I have the following code

Topics.vue


<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Topics</div>

                    <div class="panel-body">
                        <app-pages :pagination="meta.pagination"></app-pages>
                        <app-topic v-for="topic in topics" :topic="topic"></app-topic>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Topic from './Topic.vue';

    export default {
        data() {
            return {
                topics:[],
                meta: {}
            }
        },
        methods: {
            getTopics(page) {
                this.$http.get('/topics?page=' + page).then((response) => {
                    this.topics = response.body.data;
                    this.meta = response.body.meta;
                })
            }
        },
        mounted() {
            this.getTopics(1);
        },
        components:{
            'app-topic':Topic,
        }
    }
</script>

Pages.vue


<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li
            ><a href="#">{{ test() }}</a>
            </li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<style>
</style>
<script>
    export default{
        props:[
            'pagination'
        ],
        methods: {
            test() {
                console.log(this.pagination);
            }
        }
    }
</script>


As you can see I first Fetching data from An API endpoint and then pass the meta data to page child. But since this is asynchronous network call. my data would be undefined at the call which would break my application. once the data come back network, it was too late for vue to process. My question is what is the best way to pass props once the data is back? Thank you!

0 likes
0 replies

Please or to participate in this conversation.