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