BootstrapVue Table with Modal - PIA0918el

ActivityRecord.vue

<template>
    <div class="tabel">
        <b-container fluid>
            <!-- Tabel -->
            <b-table hover responsive :fields="fields" :items="items">
                <!-- A virtual column -->
                <template slot="num" slot-scope="data">{{ data.num + 1 }}</template>

                <template slot="study_evaluation" slot-scope="row">
                    <b-button
                        size="sm"
                        @click="asc(row.item, row.No, $event.target)"
                        class="mr-1"
                    >See ASC</b-button>
                </template>
            </b-table>

            <!-- ASC modal, not yet complete -->
            <b-modal
                :id="ascModal.id"
                :title="ascModal.title"
                ok-only
                @hide="resetascModal"
                scrollable
            >
                <template v-for="(ascprop, ascName) in ascModal.content">
                    <p>{{ ascprop.so_code }}</p>
                    <p>{{ ascprop.so_name }}</p>
                    <p>{{ ascprop.sks }}</p>
                    <p>{{ ascprop.grade_in_letter }}</p>
                    <p>{{ ascprop.grade_in_num }}</p>
                    <p>{{ ascprop.mutu }}</p>
                </template>
            </b-modal>
        </b-container>
    </div>
</template>

<script>
// Just make it raw for test only, haven't yet to make a http request.

export default {
    name: "ActivityRecord",
    data() {
        return {
            fields: [
                "num", // A virtual column that doesn't exist in items
                "yearOfAcademic",
                "semester",
                "status",
                // A column that needs custom formatting
                { key: "jmlhsks", label: "Total Point of Grade" },
                { key: "ipk", label: "Achievement Index" },
                "evaluasi_studi"
            ],
            items: [
                {
                    recID: r001
                    ascID: 001
                    yearOfAcademic: "2017/2018",
                    semester: "3rd",
                    status: "active",
                    jmlhsks: "8",
                    ipk: "3.333",
                    asc: [
                        {
                            id: 001,
                            so_code: "F0121",
                            so_name: "OOP",
                            sks: 4,
                            grade_in_letter: "A",
                            grade_in_num: 4,
                            mutu: 16
                        },
                        {
                            id: 002,
                            so_code: "F0121",
                            so_name: "OOP",
                            sks: 4,
                            grade_in_letter: "A",
                            grade_in_num: 4,
                            mutu: 16
                        }
                    ]
                },
                {
                    recID: r002
                    ascID: 002
                    yearOfAcademic: "2018/2019",
                    semester: "4th",
                    status: "active",
                    jmlhsks: "16",
                    ipk: "3.875"
                }
            ],
            ascModal: {
                id: "",
                title: "",
                content: ""
            }
        };
    },
    methods: {
        asc(item, No, button) {
            (this.ascModal.title = "Academic Student Card Report"),
            (this.ascModal.content = item.asc)
            (this.$root.$emit('bv::show::modal', this.ascModal.id, button)
        }
    }
};
</script>

table.html

<!-- Student Activity Table -->
<table class="table text-center table-hover table-inverse table-responsive">
  <thead class="thead-default">
      <tr>
          <th>Num.</th>
          <th>Year of Academic</th>
          <th>Semester</th>
          <th>Status</th>
          <th>Total Point of Grade</th>
          <th>Achievement Index</th>
          <th>Study Evaluation (Action button)</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>2017/2018</td>
          <td>3rd</td>
          <td>Active</td>
          <td>8</td>
          <td>3.333</td>
          <td><button type="button" class="btn btn-outline-putih" data-toggle="modal" data-target="#modalASR001">Record Detail</button></td>
      </tr>
  </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="modalASR001" tabindex="-1" role="dialog" aria-labelledby="modalASC001" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
      <div class="modal-content">
              <div class="modal-header">
                      <h5 class="modal-title">Academic Student Card</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                          </button>
                  </div>
          <div class="modal-body">
              <div class="container-fluid">
                  <header>
                      <h3 class="display-4">3rd Semester <br>2018/2019</h3>
                      <p>1703057 - Ken Robinson</p>
                      <p>Computer Science - D3 - Morning</p>
                      <p>Academic Prof. : Welsh Treudmann, M.Sc.</p>
                  </header>

                  <!-- Academic Student Card Table -->
                  <table class="table text-center table-hover table-inverse table-responsive">
                      <thead class="thead-default">
                          <tr>
                              <th class="">Num.</th>
                              <th class="">SO Code</th>
                              <th class="col-3">SO Name</th>
                              <th class="">SKS</th>
                              <th class="col-2">Grade in Letter</th>
                              <th class="col-2">Grade in Numeric</th>
                              <th class="">Mutu</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>1</td>
                              <td>IF3001</td>
                              <td>Calculus</td>
                              <td>(4)</td>
                              <td>A</td>
                              <td>4</td>
                              <td>(16)</td>
                          </tr>
                          <tr>
                              <td>1</td>
                              <td>IF3002</td>
                              <td>Object Oriented Programming</td>
                              <td>(4)</td>
                              <td>A</td>
                              <td>4</td>
                              <td>(16)</td>
                          </tr>
                          <tr>
                              <td colspan="3" class="text-right">Total Point of Grade</td>
                              <td>(8)</td>
                              <td colspan="2" aria-disabled="true"></td>
                              <td>(16)</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save</button>
          </div>
      </div>
  </div>
</div>

It's comparison, the html version and the vue version