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">Nombre: {{ nombre }}</p>
    <p class="is-size-4 mb-4">Correo: {{ correo }}</p>
    <p class="is-size-4">Programa:</p>
    <b-select 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>
    <p class="is-size-4 mb-4">Institución: {{ selected.institucion }}</p>
    <p class="is-size-4 mb-4">Dependencia: {{ selected.dependencia }}</p>
    <p class="is-size-4 mb-4">Clave: {{ 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>