Renderizar lista apenas após trouxer os dados | Vue.js parte 1: construindo Single Page Applications

<template> <div> <h1>{{msg}}</h1> <ul> <li v-for="iss of issue">{{iss.keyJira}}</li> </ul> </div> </template> <script> export default { name: 'app', data () { return { issue: [], msg: 'Teste' } }, created(){ this.$http.get('http://localhost:8080/pesquisa/INC000002335970') .then(res => res.json()) .then(issue => this.issue = issue); } } </script>

Fala ai Rafael, tudo bem? Existe N soluções para esse problema, nesse momento vou te passar a mais comum.

Para esses casos onde estamos aguardando a API retornar os dados para o front, normalmente é adicionado algum loading ou outra maneira visual para indicar que a página está processando.

Isso poderia ser feito mais ou menos assim:

<template>
  <div>
    <h1>{{msg}}</h1>
    <div class="loading" v-if="isLoading"></div>
    <ul v-else>
      <li v-for="iss of issue">{{iss.keyJira}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      issue: [],
      msg: 'Teste',
      isLoading: true,
    }
  },

  created(){
    this.$http.get('http://localhost:8080/pesquisa/INC000002335970')
    .then(res => res.json())
    .then(issue => {
        this.issue = issue;
        this.isLoading = false
    });

  }
}
</script>

A ideia basicamente é adicionar uma propriedade booleana que por padrão será true e apenas será false quando a requisição terminar e tivermos o dado para mostrar na tela.

Pode ser que esse código dê algum problema, pois, eu não testei ele. Mas, a ideia seria mais ou menos essa.

Espero ter ajudado.