pcpuma_unam_operador/components/admin/InstitucionSelect.vue

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

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

<script>
import axios from 'axios'

export default {
  props: {
    disableDefOption: { typeof: Boolean, required: false, default: true },
    updateIdInstitucion: { type: Function, required: true },
    idInstitucion: { type: Number, required: true },
    // token: { typeof: Object, required: true },
    columnSize: { typeof: String, required: false, default: '' },
  },
  data() {
    return {
      instituciones: [],
      isLoading: false,
      institucion: null,
      objVacio: {},
    }
  },
  methods: {
    obtenerCatalogoInstitucion() {
      this.isLoading = true
      axios
        .get(`${process.env.api}/institucion` /*, this.token*/)
        .then((res) => {
          this.instituciones = res.data
          this.isLoading = false
        })
        .catch((err) => {
          this.isLoading = false
          this.$alertsGenericos.imprimirError(this.$buefy, err.response.data)
        })
    },
  },
  watch: {
    idInstitucion() {
      if (!this.idInstitucion) this.institucion = this.objVacio
    },
    institucion() {
      this.updateIdInstitucion(this.institucion.id_institucion)
    },
  },
  created() {
    this.obtenerCatalogoInstitucion()
  },
}
</script>