servicio_social_front/pages/admin/programa/infoResponsable/index.vue

<template>
  <div class="container">
    <b-button class="boton is-info my-5" @click="regresar()">
      Regresar
    </b-button>
    <p class="is-size-2 mb-4"> Información del responsable</p>
    <p class="is-size-4 mb-4"> <strong>Nombre: </strong> {{ nombre }}</p>
    <p class="is-size-4 mb-4"> <strong>Correo: </strong> {{ correo }}</p>
    <div class="columns">
      <p class="is-size-4 column is-narrow" style="width: 125px;"> <strong>Programa: </strong></p>
      <b-select class="column" v-model="selected" placeholder="Elija un programa">
        <option
          v-for="programa in programas"
          v-bind:key="programa.id"
          :value="programa"
        >
          {{ programa.programa }}
        </option>
      </b-select>
    </div>
    <p class="is-size-4 mb-4"> <strong>Institución: </strong> {{ selected.institucion }}</p>
    <p class="is-size-4 mb-4"> <strong>Dependencia: </strong> {{ selected.dependencia }}</p>
    <p class="is-size-4 mb-4"> <strong>Clave: </strong> {{ selected.clavePrograma }}</p>
    <div class="">
      <b-button
        class="boton is-info my-5"
        @click="$router.push('./infoResponsable/edit')"
      >
        Editar información
      </b-button>
    </div>
    <b-button class="boton is-info my-5" @click="regresar()">
      Regresar
    </b-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      idResponsable: localStorage.getItem("idResponsable"),
      correo: localStorage.getItem('correo'),
      nombre: localStorage.getItem('nombre'),
      programas: [],
      selected: {},
    };
  },
  methods: {
    obtenerProgramas () {
      return axios
        .get(
          `${process.env.api}/programa?idUsuario=${this.idResponsable}` //,this.token
        )
        .then((res) => {
          this.programas = res.data
        })
        .catch((err) => {
          this.error();
          console.log(err.response);
        });
    },
    error() {
      this.$buefy.dialog.alert({
        title: "Error",
        message: "Ha ocurrido un <b>error</b>, inténtalo de nuevo más tarde",
        type: "is-danger",
        hasIcon: true,
        icon: "times-circle",
        iconPack: "fa",
        ariaRole: "alertdialog",
        ariaModal: true,
      });
    },
    regresar() {
      this.$router.push("/admin");
      localStorage.removeItem("correo");
    },
  },
  created () {
    this.obtenerProgramas()
  }
};
</script>

<style scoped>
  .programa{
    margin-right: 20px;
    padding-right: 20px;
  }

</style>