ridhof/dynamic-tabledata.html

## dynamic-tabledata.html
<html>
<body>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <label>Masukkan jumlah kriteria: <input v-model.number="jumlahKriteria" type="number" placeholder="5"></label>
        <p>Jumlah kriteria adalah: {{ jumlahKriteria }}</p>
        <p v-for="(index, i) in jumlahKriteria">
            Kriteria ke-{{i}}: <input type="text" v-model="kriteria[index-1]">
        </p>
        <p v-show="kriteria.length">Kriteria yang telah diinput: {{ kriteria }}</p>
        <div v-show="kriteria.length">
            <h3>Masukkan Table Bobot Perbandingan Antar Kriteria</h3>
            <table border="1px solid black">
                <tr>
                    <th style="width:100px;"></th>
                    <th v-for="nilaiKriteria in kriteria">{{nilaiKriteria}}</th>
                </tr>
                <tr v-for="(nilaiKriteria, rowIndex) in kriteria">
                    <th>{{nilaiKriteria}}</th>
                    <td v-for="(kolomIndex, i) in tableData">
                        <input type="number" v-model="kolomIndex[nilaiKriteria]">
                    </td>
                </tr>
            </table>
            <pre v-show="tableData.length">{{ tableData }}</pre>
        </div>
        <div v-show="kriteria.length">
            <h2>Alternatif</h2>
            <label>Masukkan jumlah alternatif: <input v-model.number="jumlahAlternatif" type="number" placeholder="3"></label>
            <p>Jumlah alternatif adalah: {{ jumlahAlternatif }}</p>
            <p v-for="(index, i) in jumlahAlternatif">
                Alterantif ke-{{i}}: <input type="text" v-model="alternatif[index-1]">
            </p>
            <p v-show="alternatif.length">Alternatif yang telah diinput: {{ alternatif }}</p>

            <div v-show="alternatif.length">
                <h3>Masukkan Tabel Bobot Perbandingan Antar Alternatif</h3>

                <div v-for="(index, value) in tableAlternatif">
                    <h3>Tabel Bobot Perbandingan Antar Alternatif Terhadap Kriteria {{ kriteria[index] }}</h3>
                    <table border="1px solid black">
                        <tr>
                            <th style="width:100px;"></th>
                            <th v-for="nilaiAlternatif in alternatif">{{nilaiAlternatif}}</th>
                        </tr>
                        <tr v-for="(nilaiAlternatif, rowIndex) in alternatif">
                            <th>{{nilaiAlternatif}}</th>
                            <td v-for="(kolomIndex, i) in index">
                                <input type="number" v-model="kolomIndex[nilaiAlternatif]">
                            </td>
                        </tr>
                    </table>
                </div>
                <pre>{{ tableAlternatif }}</pre>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jumlahKriteria: 1,
                kriteria: [],
                antarKriteria: [],
                tableData: [{}],
                jumlahAlternatif: 1,
                alternatif: [],
                tableAlternatif: [{}]
            },
            watch: {
                jumlahKriteria() {
                    this.tableData = []
                    for (let x = 0; x < this.jumlahKriteria; x++) {
                        this.tableData.push({})
                    }
                },
                jumlahAlternatif() {
                    this.tableAlternatif = []
                    for (let i = 0; i < this.jumlahKriteria; i++) {
                        //this.tableAlternatif.push({})
                        table = [{}]
                        for (let j = 0; j < (this.jumlahAlternatif - 1); j++) {
                            //this.tableAlternatif[i].push({})
                            table.push({})
                        }
                        this.tableAlternatif.push(table)
                    }
                    /*
                    for (let x = 0; x < this.jumlahAlternatif; x++) {
                        this.tableAlternatif.push({})
                    }
                    */
                }
            }
        })
    </script>
</body>
</html>
	<html>
	<body>
	<!-- development version, includes helpful console warnings -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	<label>Masukkan jumlah kriteria: <input v-model.number="jumlahKriteria" type="number" placeholder="5"></label>
	<p>Jumlah kriteria adalah: {{ jumlahKriteria }}</p>
	<p v-for="(index, i) in jumlahKriteria">
	Kriteria ke-{{i}}: <input type="text" v-model="kriteria[index-1]">
	</p>
	<p v-show="kriteria.length">Kriteria yang telah diinput: {{ kriteria }}</p>
	<div v-show="kriteria.length">
	<h3>Masukkan Table Bobot Perbandingan Antar Kriteria</h3>
	<table border="1px solid black">
	<tr>
	<th style="width:100px;"></th>
	<th v-for="nilaiKriteria in kriteria">{{nilaiKriteria}}</th>
	</tr>
	<tr v-for="(nilaiKriteria, rowIndex) in kriteria">
	<th>{{nilaiKriteria}}</th>
	<td v-for="(kolomIndex, i) in tableData">
	<input type="number" v-model="kolomIndex[nilaiKriteria]">
	</td>
	</tr>
	</table>
	<pre v-show="tableData.length">{{ tableData }}</pre>
	</div>
	<div v-show="kriteria.length">
	<h2>Alternatif</h2>
	<label>Masukkan jumlah alternatif: <input v-model.number="jumlahAlternatif" type="number" placeholder="3"></label>
	<p>Jumlah alternatif adalah: {{ jumlahAlternatif }}</p>
	<p v-for="(index, i) in jumlahAlternatif">
	Alterantif ke-{{i}}: <input type="text" v-model="alternatif[index-1]">
	</p>
	<p v-show="alternatif.length">Alternatif yang telah diinput: {{ alternatif }}</p>

	<div v-show="alternatif.length">
	<h3>Masukkan Tabel Bobot Perbandingan Antar Alternatif</h3>

	<div v-for="(index, value) in tableAlternatif">
	<h3>Tabel Bobot Perbandingan Antar Alternatif Terhadap Kriteria {{ kriteria[index] }}</h3>
	<table border="1px solid black">
	<tr>
	<th style="width:100px;"></th>
	<th v-for="nilaiAlternatif in alternatif">{{nilaiAlternatif}}</th>
	</tr>
	<tr v-for="(nilaiAlternatif, rowIndex) in alternatif">
	<th>{{nilaiAlternatif}}</th>
	<td v-for="(kolomIndex, i) in index">
	<input type="number" v-model="kolomIndex[nilaiAlternatif]">
	</td>
	</tr>
	</table>
	</div>
	<pre>{{ tableAlternatif }}</pre>
	</div>
	</div>
	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	jumlahKriteria: 1,
	kriteria: [],
	antarKriteria: [],
	tableData: [{}],
	jumlahAlternatif: 1,
	alternatif: [],
	tableAlternatif: [{}]
	},
	watch: {
	jumlahKriteria() {
	this.tableData = []
	for (let x = 0; x < this.jumlahKriteria; x++) {
	this.tableData.push({})
	}
	},
	jumlahAlternatif() {
	this.tableAlternatif = []
	for (let i = 0; i < this.jumlahKriteria; i++) {
	//this.tableAlternatif.push({})
	table = [{}]
	for (let j = 0; j < (this.jumlahAlternatif - 1); j++) {
	//this.tableAlternatif[i].push({})
	table.push({})
	}
	this.tableAlternatif.push(table)
	}
	/*
	for (let x = 0; x < this.jumlahAlternatif; x++) {
	this.tableAlternatif.push({})
	}
	*/
	}
	}
	})
	</script>
	</body>
	</html>