1
I have a select that should display a list of objects returned by an API call, however Vue is not rendering the list. Objects are being stored in the variable, but are not being displayed. Below the code:
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.: In my code are the variables of the api call (URL and header). In the Vuedevtools extension for Chrome the variable "types" appears populated, with the objects. If I print the variable on the screen it also displays the objects, but in select it is not working.
Obs2.: In the Edge browser it is working, but in all others it is not.
you are using Jquery and Vuejs in the same application ? The loco
– Joan Marcos
Actually it’s just to initialize the Materialize select, but I know it’s not recommended. Also, materialize is no longer required to use jquery and I have tried using pure javascript and this is not the problem.
– Paulo Vinícius
You don’t need the
this
here:this.tipos
. Uses onlyv-for="tipo in tipos"
– Sergio
What a sadness Jquery and Vue :(
– Marconi