Table dynamic Vue JS

dynamic-table-structure.vue

<template>
    <table 
      border="1" 
      cell-padding="5" 
      cell-spacing="5" 
      width="100%"
      style="border-collapse: collapse;border-color: rgb(148, 150, 152);color: #55616e;"
      v-if="hariAktif"
    >
      <thead>
        <tr>
          <th v-for="(item) in hariAktif" v-bind:key="`hari-aktif-${item.id}`">
            {{ item.name}}
          </th>
        </tr>
        <tr>
          <th v-for="(item, index) in hariAktif" v-bind:key="`pilih-jam-${index}`">
            Pilih Skenario Jam
            <md-field>
              <md-select 
                name="skenario_jam"
                v-model="hariAktif[index].id_skenario_jam"
                @md-selected="selectJam(index)"
              >
                <md-option
                  v-for="jam in skenario_jam"
                  :key="`opt-${index}-${jam.id}`"
                  :value="jam.id"
                >{{ jam.nama }}</md-option>
              </md-select>
            </md-field>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td v-for="(item, index) in hariAktif" v-bind:key="`td-${item.id * index}`">
            <div v-if="hariAktif[index].skenario">
              <div v-for="i in 10" v-bind:key="`${i}-${i * index + index}`" style=" margin-bottom: 15px;">
                <div v-if="hariAktif[index].skenario[`jam_awal_${i}`] !== '00:00:00'">
                  <div style="display: flex; justify-content: space-between;">
                    <span>{{ hariAktif[index].skenario[`jam_awal_${i}`] }}</span> 
                    <span>s/d</span> 
                    <span>{{ hariAktif[index].skenario[`jam_akhir_${i}`] }}</span>
                  </div>
                  <div style="display: flex; justify-content: space-between;">
                    <b>Mapel:</b>
                    <md-field>
                      <md-select 
                        :name="`mapel_jam_${i}`"
                        v-model="hariAktif[index].skenario[`mapel_jam_${i}`]"
                        @md-selected="detailMapel($event, index)"
                      >
                        <md-option
                          v-for="mapel in mapel_list"
                          :key="mapel.id"
                          :value="mapel.id"
                        >{{ mapel.kode }} - {{ mapel.nama }}</md-option>
                      </md-select>
                    </md-field>
                  </div>
                  <div style="display: flex; justify-content: space-between;">
                    <b>Guru &nbsp;:</b>
                    <md-field>
                      <md-select 
                        :name="`guru_jam_${i}`"
                        v-model="hariAktif[index].skenario[`guru_jam_${i}`]"
                      >
                        <md-option
                          v-for="guru in guru_list"
                          :key="guru.id"
                          :value="guru.id"
                        >{{ guru.nomor_induk }} - {{ guru.nama }}</md-option>
                      </md-select>
                    </md-field>
                  </div>
                  <hr />
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </template>
  
  <script>
import { SlideYDownTransition } from "vue2-transitions";
import Swal from "sweetalert2";
import UUID from 'vue-uuid';

import rombelParalel from "@/handlers/data-klasifikasi/rombelParalel.js";
import waliKelas from "@/handlers/data-klasifikasi/waliKelas.js";
import pesertaRombel from "@/handlers/data-klasifikasi/pesertaRombel.js";
import jadwalPelajaran from "@/handlers/data-klasifikasi/jadwalPelajaran.js";

import "vue-good-table/dist/vue-good-table.css";

export default {
  components: {
    SlideYDownTransition,
    UUID
  },
  data() {
    return {
      isGranted: false,
      id: null,
      hariAktif: [],
      jadwalShow: null,
      currentView: 'input',
      item: {
        idTahunAkademik: null,
        idJurusan: null,
        idKelas: null,
        rombel: null,
        karyawan: null,
        skenarioHari: null
      },
      error: {
        idTahunAkademik: null,
        idJurusan: null,
        idKelas: null,
        rombel: null,
        karyawan: null,
        skenarioHari: null
      },

      // Tahun Akademik
      tahunAkademik: JSON.parse(localStorage.getItem('tahun_akademik')).tahun_akademik,
      idTahunAkademik: JSON.parse(localStorage.getItem('tahun_akademik')).id,

      // Karyawan
      karyawan: null,
      searchedKaryawan: [],
      karyawanParams: {
        cariKaryawan: null
      },

      skenario_hari: [],
      skenario_jam: [],
      mapel_list: [],
      guru_list: [],

      // Jurusan
      jurusan: [],

      // Kelas
      kelas: [],
      jadwalList: [],
      
    };
  },
  computed: {

    sanitizedSearchedKaryawan() {
      return this.searchedKaryawan.map(label => ({
        idKaryawan: label.key,
        namaKaryawan: label.value,
        toLowerCase: () => label.value,
        toString: () => label.value
      }));
    },

  },
  methods: {
    detailMapel(event, index) {
      console.log(event, index)
      console.log(this.hariAktif)
    },
    updateView(view) {
      this.currentView = view;
    },
    notifySuccess(param) {
      Swal.fire({
        type: "success",
        title: "",
        text: param,
        timer: 1000,
        showConfirmButton: false
      }).then(function() {});
    },

    notifyWarning(param) {
      Swal.fire({
        type: "warning",
        title: "",
        text: param,
        showConfirmButton: true,
        confirmButtonText: "Tutup"
      }).then(function() {});
    },

    notifyError(param) {
      Swal.fire({
        type: "error",
        title: "",
        text: param,
        showConfirmButton: true,
        confirmButtonText: "Tutup"
      }).then(function() {});
    },

    getItem: function() {
      const { id } = this.$route.params;
      this.id = id;
      pesertaRombel.get(this, id);
    },

    /*
     * Karyawan
     */
    cariKaryawan() {
      if (typeof this.karyawan === "string") {
        // Tahun Akademik
        this.item.idKaryawan = "";
        this.karyawanParams.cariKaryawan = this.karyawan;
        this.setKaryawan();
      }
    },
    selectKaryawan() {
      if (this.karyawan) {
        this.item.idKaryawan = this.karyawan.idKaryawan;
      }
    },

    detailSkenarioHari(id) {
      const getSelectedSkenario = this.skenario_hari.filter(val => val.id === id);
      const selectedSkenario = getSelectedSkenario[0];

      const listHari = [];

      if (selectedSkenario.senin === 1) {
        listHari.push({id: 1, name: 'Senin', skenario: 0})
      }  
      if (selectedSkenario.selasa === 1) {
        listHari.push({id: 2, name: 'Selasa', skenario: 0})
      } 
      if (selectedSkenario.rabu === 1) {
        listHari.push({id: 3, name: 'Rabu', skenario: 0})
      } 
      if (selectedSkenario.kamis === 1) {
        listHari.push({id: 4, name: 'Kamis', skenario: 0})
      } 
      if (selectedSkenario.jumat === 1) {
        listHari.push({id: 5, name: 'Jumat', skenario: 0})
      } 
      if (selectedSkenario.sabtu === 1) {
        listHari.push({id: 6, name: 'Sabtu', skenario: 0})
      } 
      if (selectedSkenario.minggu === 1) {
        listHari.push({id: 7, name: 'Minggu', skenario: 0})
      }

      this.hariAktif = listHari;

    },

    selectJam(indexHari) {

      const { id_skenario_jam } = this.hariAktif[indexHari];
      const skenarioJam = this.skenario_jam.find(val => val.id === id_skenario_jam);
      this.hariAktif[indexHari].skenario = skenarioJam;
      
    },

    /*
     * Set Input
     */

    setKaryawan() {
      waliKelas.setKaryawan(this, this.karyawanParams);
    },
    setJurusan() {
      rombelParalel.setJurusan(this);
    },
    setKelas(item) {
      rombelParalel.setKelas(this, item);
    },
    getSkenarioHari() {
      jadwalPelajaran.getSkenarioHari(this);
    },
    getSkenarioJam() {
      jadwalPelajaran.getSkenarioJam(this);
    },
    getMapel() {
      jadwalPelajaran.getMapel(this);
    },
    getGuru() {
      jadwalPelajaran.getGuru(this);
    },
    getJadwal() {
      jadwalPelajaran.getDetailJadwal(this);
    },
    updateItem: function() {
      jadwalPelajaran.update(this, this.hariAktif);
    },

    gotoIndex: function() {
      this.$router.push("/data-klasifikasi/jadwal-pelajaran");
    }
  },
  created() {
    const getPathName = window.location.pathname;
    const rolePrivileges = localStorage.getItem("rolePrivileges");
    if (
      rolePrivileges.includes(getPathName) ||
      rolePrivileges.includes(getPathName + "/")
    ) {
      this.isGranted = true;
    }
  },
  mounted() {
    const url = window.location.href;
    if (url.includes("/#")) {
      this.$router.replace(url.slice("#", ""));
    }
    this.setJurusan();
    this.setKelas();
    this.getItem();
    this.getSkenarioHari();
    this.getSkenarioJam();
    this.getJadwal();
  }
};
</script>

Coba tambahin code script nya mas, buat liat trigger console log nya..

Sudah om @Iyongbudiarso