1

Tenho um select que deve exibir uma lista de objetos retornada por uma chamada de API, entretanto o Vue não está renderizando a lista. Os objetos estão sendo armazenados na variável, porém não estão sendo exibidos. Abaixo o código:

HTML

<select id="tipo_empresa" v-model="empresa.tipo_empresa">
    <option value="" disabled selected>Tipo de empresa</option>
    <option v-for="tipo in this.tipos" v-bind:key="tipo.id_em_tipo" v-bind:value="tipo.id_em_tipo">{{ tipo.descricao}}</option>
</select>

JS

<script>
    const axios = require('axios');
    export default {
        data(){
           return {
               tipos: [],
               empresa: {
                   tipo_empresa: ''
               }
           }
        },
        mounted(){
             $(document).ready(function() {
                 $('#tipo_empresa').formSelect();
             });
             this.getTipos();
        },
        methods() {
            popularSelect (){
                axios.get(URL, header)
                .then(res => (this.tipos = res.data));
            }
        }
    }

</script>

Obs.: No meu código estão as variáveis da chamada de api (URL e header). Na extensão VueDevTools para o Chrome a variável "tipos" aparece populada, com os objetos. Se eu imprimo a variável na tela ela também exibe os objetos, porém no select não está funcionando.

Obs2.: No navegador Edge ele está funcionando, porém em todos os outros, não.

4
  • você está usando JQuery e Vuejs na mesma aplication ? O loco Commented 28/02/2019 às 14:01
  • Na realidade é só para inicializar o select do Materialize, mas eu sei que não é recomendado. Além disso, o materialize não tem mais a obrigatoriedade de usar o jquery e eu já tentei usando o javascript puro e esse não é o problema. Commented 28/02/2019 às 14:11
  • 2
    Não precisas do this aqui: this.tipos. Usa somente v-for="tipo in tipos"
    – Sergio
    Commented 28/02/2019 às 14:14
  • Que tristeza Jquery e Vue :(
    – Marconi
    Commented 1/03/2019 às 11:42

1 Resposta 1

2

Com a ajuda de um colega, nós descobrimos uma solução. A inicialização do componente select estava no ciclo mounted() do Vue. Alteramos para o ciclo updated().

Creio que preciso estudar melhor o ciclo de vida do Vue.

A seguir, vou deixar como ficou o código JS para futuras referências:

<script>
const axios = require('axios');
export default {
    data(){
       return {
           tipos: [],
           empresa: {
               tipo_empresa: ''
           }
       }
    },
    updated(){
         document.addEventListener('DOMContentLoaded', function() {
             var elems = document.querySelectorAll('#tipo_empresa');
             var options = {};
             var instances = M.FormSelect.init(elems, options);
         });
         this.getTipos();
    },
    methods() {
        popularSelect (){
            axios.get(URL, header)
            .then(res => (this.tipos = res.data));
        }
    }
}

</script>

EDIT

Conforme o comentário do @sergio, eu, também, retirei o this da variável do v-for ficando assim:

HTML

<select id="tipo_empresa" v-model="empresa.tipo_empresa">
    <option value="" disabled selected>Tipo de empresa</option>
    <option v-for="tipo in tipos" v-bind:key="tipo.id_em_tipo" v-bind:value="tipo.id_em_tipo">{{ tipo.descricao}}</option>
</select> 

EDIT 2

Removi o Jquery do projeto, agora a inicialização do componente está com javascript puro.

2
  • Como é que ficou o v-for no template?
    – Sergio
    Commented 28/02/2019 às 21:50
  • Do modo como você havia comentado, sem o "this". code<select> Commented 1/03/2019 às 11:22

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 .