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>
