1

Estou utilizando dados vindos de um request via Axios para popular um componente form, passo esses valores via prop para alguns componentes dentro deste form.

O problema é que alguns componentes que utilizam os dados dentro do created acabam recebendo undefined, pois são carregados antes dos dados serem recebidos do Axios. gerando alguns erros tipo esse:

app.js:16258 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'map' of undefined"

found in
---> <GroupsComponent> at resources/js/components/GroupsComponent.vue
       <VForm>
         <Edit> at resources/js/components/Edit.vue

Gostaria de saber se existe alguam forma de carregar o componente somente depois dos dados estarem disponíveis ou algo assim.

Segue o código da requisição:

    created: function () {
                if(this.$route.params.data){
                     this.jsonData =  this.$route.params.data
                }else{
                     axios.get('/api/atendimentos/edit/'+this.$route.params.id)
                    .then( response =>{
                       
                         this.jsonData = response.data
                    });  
                }
        }
2
  • Nesse caso, você tentou algo do tipo v-if nesse componente para que ele seja renderizado somente quando houver dados no this.jsonData? Algo do tipo <Form v-if="jsonData" /> 11/02/2021 às 4:14
  • O problema é que eu preciso que o mesmo seja renderizado, com o v-if o componente não é rendereizado, mesmo após a promisse ser resolvida, tentei fazer uma gambiarra setando um objeto vazio dentro do componente que apresenta erro, assim ele é renderizado mas sem os dados, como paliativo eu estou fazendo um fetch antes mesmo de carregar o componente pelo vue-router e mando o objeto inteiro como parametro, mas se o usuario acessar a url diretamente ele continua apresentando o mesmo erro
    – Juliano
    11/02/2021 às 8:36

1 Resposta 1

0

Resolvi usando o EventBus.$emit para passar os dados para o componente sem as props, não é a melhor solução mas no momento é a melhor que encontrei ;)

No form:

 created: function () {
        if(this.$route.params.data){
             this.jsonData =  this.$route.params.data
        }else{
             axios.get('/api/atendimentos/edit/'+this.$route.params.id)
            .then( response =>{
               
                 this.jsonData = response.data
                  EventBus.$emit('atendDataLoaded', response.data)
            });  
        }

No componente:

 created: function () {
            EventBus.$on('atendDataLoaded', (data)=>{
                 this.jsonGroups = data.groups
                 this.selectedGroups = data.atend_groups.map((item) =>{
                    return item.id;
                })
            
            });
        
         },

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .