pcpuma_unam_operador/components/operador/InfoModulo.vue

<template>
  <div class="column is-8">
    <h3 class="is-size-4 mb-4">Datos del Módulo</h3>

    <div class="columns">
      <b-field class="column" label="Nombre del Módulo">
        <p class="input">{{ modulo.modulo }}</p>
      </b-field>
      
      <b-field class="column" label="Status del Módulo">
        <p
          class="input"
          v-for="(sA, i) in statusActivo"
          :key="i"
          :class="sA.tagType"
          v-show="modulo.activo === sA.activo"
        >
          {{ sA.texto }}
        </p>
      </b-field>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modulo: { type: Object, required: true },
  },
  data() {
    return {
      statusActivo: [
        {
          texto: 'Activo',
          tagType: 'is-success',
          activo: true,
        },
        { texto: 'Inactivo', tagType: 'is-danger', activo: false },
      ],
    }
  },
}
</script>

<style></style>