Immediately rendering the following template, without waiting for the API call to complete.
I came up with a solution using v-if to prevent elements from rendering until the data is available.
However, this seems to go against the DRY principle as I have to wrap my elements with v-if statements.
Is there a different approach to tackle this issue? Another way to code it?
<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>