pcpuma_unam_operador/components/selects/SelectModelo.vue
2022-07-25 23:30:07 -05:00

71 lines
1.7 KiB
Vue

<template>
<b-field class="column mb-0 pb-0" label="Modelo" :class="columnSize">
<b-select
icon="store"
:loading="isLoadingSelect"
v-model="modelo"
expanded
rounded
>
<option :disabled="deshabilitarOptVacia" :value="objVacio">
Selecciona una opción
</option>
<option v-for="(m, index) in modelos" :key="index" :value="m">
{{ m.modelo }}
</option>
</b-select>
</b-field>
</template>
<script>
import axios from 'axios'
export default {
props: {
deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
modeloPadre: { type: Object, required: true, default: () => ({}) },
columnSize: { typeof: String, required: false, default: '' },
tipo: { typeof: String, required: true, default: '' },
},
data: () => {
return {
modelos: [],
isLoadingSelect: false,
modelo: {},
objVacio: {},
}
},
methods: {
obtenerModelos() {
this.isLoadingSelect = true
this.modelos = []
axios
.get(`${process.env.api}/modelo?tipo=${this.tipo}`)
.then((res) => {
this.modelos = res.data
this.$emit('catalogo-modelos', this.modelos)
this.isLoadingSelect = false
})
.catch((err) => {
this.isLoadingSelect = false
})
},
},
watch: {
modelo(modeloSeleccionado) {
this.$emit('modelo-seleccionado', modeloSeleccionado)
},
modeloPadre(nuevoModelo) {
if (this.$objIsEmpty(nuevoModelo)) this.modelo = this.objVacio
},
},
created() {
this.modelo = this.objVacio
this.obtenerModelos()
},
}
</script>
<style scoped></style>