pcpuma_unam_operador/components/selects/SelectInstitucion.vue

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

      <option
        v-for="(i, index) in instituciones"
        :key="index"
        :value="i.id_institucion"
      >
        {{ i.institucion }}
      </option>
    </b-select>
  </b-field>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    deshabilitarOptVacia: { typeof: Boolean, required: false, default: true },
    columnSize: { typeof: String, required: false, default: '' },
    idInstitucionPadre: { type: Number, required: true, default: 0 },
  },
  data() {
    return {
      instituciones: [],
      isLoadingSelect: false,
      idInstitucion: 0,
    }
  },
  methods: {
    obtenerInstituciones() {
      this.isLoadingSelect = true
      this.instituciones = []
      axios
        .get(`${process.env.api}/institucion`, this.$getToken.token())
        .then((res) => {
          this.instituciones = res.data
          this.$emit('catalogo-instituciones', this.instituciones)
          this.isLoadingSelect = false
        })
        .catch((err) => {
          this.isLoadingSelect = false
        })
    },
  },
  watch: {
    idInstitucion() {
      this.$emit('institucion-seleccionada', this.idInstitucion)
    },
    idInstitucionPadre(nuevaInstitucion) {
      this.idInstitucion = nuevaInstitucion
    },
  },
  created() {
    if (this.idInstitucionPadre) this.idInstitucion = this.idInstitucionPadre
    this.obtenerInstituciones()
  },
}
</script>