如何在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的路由器 - https://router.vuejs.org/en/advanced/data-fetching.html

所以路由通過觀看$route對象

檢查激活後，數據將被immiteately獲取我類似的答案在這裏Check permissions before vue.js route loads