如何在API调用后呈现数据？ （Vue.js）

Question

因此，立即呈现以下模板，它不会等待API调用。

我发现的解决方案是使用v-if来保持元素不被渲染，直到数据存在。

如果我必须用v-if包装我的元素，这似乎与DRY原则违反直觉。
还有另一种解决这个问题的方法吗？另一种编码方式？

<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>

Answer 1

是的，如果您使用的是Vue Router - https://router.vuejs.org/en/advanced/data-fetching.html

因此，在通过观察$route对象激活路线后，将立即获取数据

在此处查看我的类似答案Check permissions before vue.js route loads