如何在 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 对象

激活路由后，将立即获取数据

在这里查看我的类似答案

如何在 API 调用后渲染数据？ (Vue.js)

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

javascript

vue.js

vuejs2