pcpuma_unam_operador/components/selects/SelectCarrera.vue

<template>
  <b-field class="column mb-0 pb-0" label="Carrera" :class="columnSize">
    <b-select
      icon="store"
      :loading="isLoadingSelect"
      v-model="institucionCarrera"
      expanded
      rounded
    >
      <option :disabled="deshabilitarOptVacia" :value="objVacio">
        Selecciona una opción
      </option>

      <option
        v-for="(ic, index) in institucionCarreras"
        :key="index"
        :value="ic"
      >
        {{ 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 },
    institucionCarreraPadre: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    columnSize: { typeof: String, required: false, default: '' },
  },
  data: () => {
    return {
      institucionCarreras: [],
      isLoadingSelect: false,
      institucionCarrera: {},
      objVacio: {},
    }
  },
  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: {
    idInstitucion(nuevoIdInstitucion) {
      if (nuevoIdInstitucion) this.obtenerInstitucionCarreras()
    },
    institucionCarrera(institucionCarreraSeleccionada) {
      this.$emit(
        'institucion-carrera-seleccionada',
        institucionCarreraSeleccionada
      )
    },
    institucionCarreraPadre(nuevaInstitucionCarrera) {
      if (this.$funcionesGlobales.objIsEmpty(nuevaInstitucionCarrera))
        this.institucionCarrera = this.objVacio
    },
  },
  created() {
    this.institucionCarrera = this.objVacio
    this.obtenerInstitucionCarreras()
  },
}
</script>

<style scoped></style>