pcpuma_unam_operador/components/selects/SelectCarrera.vue
2022-08-03 15:41:31 -05:00

79 lines
2.0 KiB
Vue

<template>
<b-field class="column mb-0 pb-0" label="Carrera" :class="columnSize">
<b-select
icon="store"
:loading="isLoadingSelect"
v-model="idInstitucionCarrera"
expanded
rounded
>
<option :disabled="deshabilitarOptVacia" :value="0">
Selecciona una opción
</option>
<option
v-for="(ic, index) in institucionCarreras"
:key="index"
:value="ic.id_institucion_carrera"
>
{{ ic.carrera.carrera }}
</option>
</b-select>
</b-field>
</template>
<script>
import axios from 'axios'
export default {
props: {
deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
idInstitucion: { type: Number, required: true, default: 0 },
idInstitucionCarreraPadre: { type: Number, required: true, default: 0 },
columnSize: { typeof: String, required: false, default: '' },
},
data: () => {
return {
institucionCarreras: [],
isLoadingSelect: false,
idInstitucionCarrera: 0,
}
},
methods: {
obtenerInstitucionCarreras() {
this.isLoadingSelect = true
this.institucionCarreras = []
axios
.get(
`${process.env.api}/institucion-carrera?id_institucion=${this.idInstitucion}`,
this.$getToken.token()
)
.then((res) => {
this.institucionCarreras = res.data
this.$emit('catalogo-institucion-carreras', this.institucionCarreras)
this.isLoadingSelect = false
})
.catch((err) => {
this.isLoadingSelect = false
})
},
},
watch: {
idInstitucionCarrera(institucionCarreraSeleccionada) {
this.$emit(
'institucion-carrera-seleccionada',
institucionCarreraSeleccionada
)
},
idInstitucionCarreraPadre(nuevaInstitucionCarrera) {
this.idInstitucionCarrera = nuevaInstitucionCarrera
},
},
created() {
if (this.idInstitucion) this.obtenerInstitucionCarreras()
},
}
</script>
<style scoped></style>