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

【问题标题】：How to render the data after the API Call? (Vue.js)API调用后如何渲染数据？ (Vue.js)
【发布时间】：2017-06-11 12:51:46
【问题描述】：

所以下面的模板会立即渲染，并且不会等待 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>

【问题讨论】：

标签： javascript vuejs2 vue.js

【解决方案1】：

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

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

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

【讨论】：