2

Estou com um problema bem estranho, tenho o seguinte código dentro de um componente do VueJS.

Estou desenvolvendo um sistema onde escolho as opções através de vários checkboxes, e passo o id deles para esse meu componente abaixo.

E uso o axios para fazer a requisição no banco e recuperando os dados que preciso.

Veja abaixo como está o componente.

<template>
    <div>
        <ul>
            {{ modulos_encontrados }}
        </ul>
    </div>
</template>

<script>

export default {
    props:['turmas_checked'],
    data () {
        return {
            modulos:[]
        }
    },
    computed:{
        modulos_encontrados(){
            if(this.turmas_checked.length > 0){     
                  axios.get(`/modulos/${this.turmas_checked}`)
                .then(response => {
                    this.modulos = response.data;
                });
            }
        }

    }
}
</script>

E se eu chamo o this.modulos fora do then(), eu tenho o resultado que quero, mas fica em um looping infinito, fazendo requisições através do axios, e se coloco dentro do then claro que não vai retornar nada.

Alguém sabe como posso recuperar o que quero do resultado do axios e listar dentro desse mesmo componente ??

2
  • Console.log(this.turmas_checked) retorna o que?
    – Marconi
    Commented 27/06/2018 às 1:42
  • Retorna os ids que preciso, as consultas no banco consigo fazer normalmente, o problema é listar esses resultados no template, sendo que quando dou um return fora do then() fica fazendo requisições infinitas. Commented 27/06/2018 às 1:53

1 Resposta 1

3

Não deves usar computed dessa maneira, o computed é ideal para lógica síncrona e deve ser uma função pura.

Usa o watch para seguir mudanças em turmas_checked e com imediate: true para correr o watcher quando o componente monta.

O código poderia ficar assim:

<template>
  <div>
    <ul>
      {{ modulos_encontrados }}
    </ul>
  </div>
</template>

<script>
export default {
  props: ['turmas_checked'],
  data() {
    return {
      modulos: [],
    };
  },
  computed: {
    modulos_encontrados() {
      const length = this.modulos.length;
      return `Encontrados ${length} modulo${length === 1 ? 's' : ''}.`;
    },
  },
  watch: {
    message: {
      immediate: true,
      handler() {
        if (this.turmas_checked.length > 0) {
          axios.get(`/modulos/${this.turmas_checked}`).then((response) => {
            this.modulos = response.data;
          });
        }
      },
    },
  },
};
</script>
2
  • Olá Sergio, vi sua solução, e a primeiro momento não funcionou, mas eu alterei algumas coisinhas e agora foi, muito obrigado, devo colocar a solução aqui para quem mais precisar ? Commented 28/06/2018 às 6:50
  • @AlexandreCardoso ótimo! Se foi algum erro na minha resposta podes comentar que eu corrijo, mas vale a pena comentar a tua adaptação na minha resposta caso seja util a outros. Se é só coisa pouca não vale a pena criares outra resposta.
    – Sergio
    Commented 28/06/2018 às 6:55

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 .