ridhof/vue-bind-multi-dimen-array.html

## vue-bind-multi-dimen-array.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 jumlahKriteria">
                        <input type="number" v-on:keyup="insert(antarKriteria,rowIndex,kolomIndex-1)">
                        <!--
                        <label v-if="(kolomIndex-1)==rowIndex">1</label>
                        <label v-else-if="(kolomIndex-1)>rowIndex">
                            <input type="number" v-model="antarKriteria[i]">
                        </label>
                        <label v-else="(kolomIndex-1)==rowIndex">{{rowIndex}}=>{{kolomIndex-1}}</label>
                        -->
                    </td>
                </tr>
            </table>
            <p v-show="antarKriteria.length">Bobot Antar Kriteria yang telah diinput: {{ antarKriteria }}</p>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jumlahKriteria: 1,
                kriteria: [],
                antarKriteria: [],
            },
            methods: {
                insert: function (matrix, row, col) {
                    matrix.push()
                    matrix[row].push(value)
                    //if(!matrix[row].length) matrix[row] = []
                    //matrix[row].push(col)
                }
            }
        })
    </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 jumlahKriteria">
	<input type="number" v-on:keyup="insert(antarKriteria,rowIndex,kolomIndex-1)">
	<!--
	<label v-if="(kolomIndex-1)==rowIndex">1</label>
	<label v-else-if="(kolomIndex-1)>rowIndex">
	<input type="number" v-model="antarKriteria[i]">
	</label>
	<label v-else="(kolomIndex-1)==rowIndex">{{rowIndex}}=>{{kolomIndex-1}}</label>
	-->
	</td>
	</tr>
	</table>
	<p v-show="antarKriteria.length">Bobot Antar Kriteria yang telah diinput: {{ antarKriteria }}</p>
	</div>

	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	jumlahKriteria: 1,
	kriteria: [],
	antarKriteria: [],
	},
	methods: {
	insert: function (matrix, row, col) {
	matrix.push()
	matrix[row].push(value)
	//if(!matrix[row].length) matrix[row] = []
	//matrix[row].push(col)
	}
	}
	})
	</script>
	</body>
	</html>