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

<template>
  <div class="container">
    <b-button class="boton is-info my-5" @click="$router.push('./')">
      Regresar
    </b-button>
    <p class="is-size-2 mb-4">Información del responsable</p>
    <p class="is-size-4 mb-4">Nombre: {{ responsable.nombre }}</p>
    <p class="is-size-4 mb-4">Correo: {{ responsable.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.clave }}</p>
    <b-button class="boton is-info my-5" @click="$router.push('./')">
      Regresar
    </b-button>
    <b-button
      class="boton is-info my-5"
      @click="$router.push('./infoResponsable/editar')"
    >
      Editar información
    </b-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      idResponsable: localStorage.getItem("idResponsable"),
      responsable: {
        nombre: "Marco",
        correo: "marco@gmail.com",
      },
      programas: [
        {
          id: 1,
          programa: "programa 1",
          institucion: "institucion falsa 1",
          dependencia: "dependencia falsa 1",
          clave: 101,
        },
        {
          id: 2,
          programa: "programa 2",
          institucion: "institucion falsa 2",
          dependencia: "dependencia falsa 2",
          clave: 102,
        },
        {
          id: 3,
          programa: "programa 3",
          institucion: "institucion falsa 3",
          dependencia: "dependencia falsa 3",
          clave: 103,
        },
      ],
      selected: {},
    };
  },
  methods: {
    obtenerDatos() {
      return axios
        .get(
          // aun no hay back
          `${process.env.api}/servicio/admin?idResponsable=${this.idResponsable}` //,
          // this.token
        )
        .then((res) => {
          this.responsable = res.data;
          this.programas = res.data.programas;
        })
        .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,
      });
    },
  },
};
</script>