Wie werden die Daten nach dem API-Aufruf gerendert? (Vue.js)

Question

Die folgende Vorlage wird sofort gerendert und wartet nicht auf den API-Aufruf.

Die Lösung, die ich gefunden habe, verwendet v-if, um die Elemente vom Rendern bis zu den Daten zu halten.

Dies scheint dem DRY-Prinzip entgegenzutreten, wenn ich meine Elemente mit v-if umhüllen muss.
Gibt es einen anderen Ansatz für dieses Problem? Eine andere Möglichkeit, dies zu kodieren?

<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

Ja, es ist, wenn Sie Vue Router verwenden - https://router.vuejs.org/en/advanced/data-fetching.html

So würden Daten immiteately geholt werden, nachdem die Route durch die Beobachtung der $route Objekt aktiviert wird

Check out my ähnliche Antwort hier Check permissions before vue.js route loads