How to render the data after the API Call? (Vue.js)

Question

So the following template is rendered immediately, and it does not wait for the API call.

The solution I found is using v-if in order to keep the elements from rendering until the data is there.

This seems counterintuitive to the DRY principle if I have to wrap my elements with v-if.
Is there another approach to this problem? Another way of coding this?

<template>
    <div id="app">
        <div v-if="obj">
            <h2>{{ obj[0].item }}</h2>
        </div>
        <div v-if="obj">
            <h5>{{ obj[0].id }}</h5>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            obj: []
        }
    },
    mounted: function() {
        axios.get(URL)
            .then(response =>
                this.obj = response
            });
}
}
</script>

Community · Accepted Answer · 2017-05-23 10:30:46Z

1

Yes there is if you are using Vue Router - https://router.vuejs.org/en/advanced/data-fetching.html

So data would be fetched immiteately after the route is activated by watching the $route object

Check my similar answer here Check permissions before vue.js route loads

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jan 26, 2017 at 8:28

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render the data after the API Call? (Vue.js)

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related