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.
this
aqui:this.tipos
. Usa somentev-for="tipo in tipos"