Directive ini digunakan untuk iterasi data berbentuk objek. Format penggunaan v-for adalah v-for="alias in collection". Pada materi ini, saya mencoba menghadirkan contoh data / objek Javascript yang di dalam setiap property-nya masih terdapat property lagi. Objek seperti ini dikenal dengan istilah nested object atau objek bersarang. Meskipun agak panjang dan “mungkin” terkesan sedikit rumit, namun struktur data tersebut sebenarnya sangat sederhana.

Buat file latihan003.html, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 003</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                listOrangSantuy: [
                    { 
                        nama: 'Agus', 
                        koleksiMobil: { 
                            mobil1: 'BMW', 
                            mobil2: 'Mercedez', 
                            mobil3: 'Lamborghini'
                        }
                    },
                    { 
                        nama: 'Bambang', 
                        koleksiMobil: { 
                            mobil1: 'Maserati', 
                            mobil2: 'Peugeot', 
                            mobil3: 'Toyota' 
                        }
                    },
                    { 
                        nama: 'Rian', 
                        koleksiMobil: { 
                            mobil1: 'Bugatti', 
                            mobil2: 'Mercedez', 
                            mobil3: 'Subaru' 
                        }
                    }
                ]
            }
        });
    </script>
</body>
</html>

Cara membaca struktur data pada contoh di atas :

  • Saya memiliki 1 (satu) property bernama listOrangSantuy pada objek Javascript.
  • Di dalam property listOrangSantuy ini, terdapat 3 (tiga) property berbentuk objek.
  • Setiap objek yang ada di listOrangSantuy, masing-masing berisi 2 (dua) property : nama dan objek koleksiMobil.
  • Objek koleksiMobil terdiri dari 3 (tiga) property lagi, antara lain : mobil1, mobil2 dan mobil3.

Setelah memahami struktur data di atas, pertanyaan berikutnya adalah bagaimana cara mengakses objek bersarang tersebut ? Kita kembali ke file latihan003.html, copy paste kode berikut :

<!-- Tanpa v-for -->
<p><strong>Tanpa v-for</strong></p>
<p>{{ listOrangSantuy }}</p>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">

    <!-- SISIPKAN DI SINI -->
    
    </div>
    <script src="vue.js"></script>

Tanpa menggunakan directive v-for, rendering elemen <p>{{ listOrangSantuy }}</p> akan menghasilkan output berderet seperti gambar berikut :

menggunakan directive v-for pada vue.js

Sekarang kita akan menggunakan directive v-for untuk menelusuri seluruh property yang ada di property listOrangSantuy. Masih di file yang sama latihan003.html, copy paste kode berikut :

<!-- Dengan v-for -->
<p><strong>Dengan v-for</strong></p>
<ul>
    <li v-for="orangSantuy in listOrangSantuy">{{ orangSantuy }}</li>
</ul>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">

    <!-- Tanpa v-for -->
    <p><strong>Tanpa v-for</strong></p>
    <p>{{ listOrangSantuy }}</p>
    
    <!-- SISIPKAN DI SINI -->
    
    </div>
    <script src="vue.js"></script>

Ingat format v-for="alias in collection" yang telah saya sebutkan sebelumnya? Pada perulangan v-for di atas, orangSantuy merupakan alias dari collection listOrangSantuy. Nilai dari alias orangSantuy inilah yang nantinya diteruskan ke expression {{ orangSantuy }}.

Eksekusi file latihan003.html, kemudian bandingkan antara output yang diperoleh dari expression tanpa v-for dengan expression yang melibatkan v-for, terlihat jelas bukan perbedaan-nya ?

menggunakan directive v-for pada vue.js

Pada kode di atas kita sudah telah menelusuri 3 (tiga) property berbentuk objek dengan menggunakan directive v-for. Akan tetapi, bagaimana cara mengakses property nama secara terpisah, termasuk property mobil1, mobil2 dan mobil3 yang ada di dalam koleksiMobil ? Copy paste kode berikut ke file latihan003.html :

<!-- Mengakses property di dalam property -->
<p><strong>Mengakses property di dalam property</strong></p>
<ul>
    <li v-for="orangSantuy in listOrangSantuy">
        {{ orangSantuy.nama }}
        <ul>
            <li v-for="mobil in orangSantuy.koleksiMobil">
                {{ mobil }}
            </li>
        </ul>
    </li>
</ul>

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">

    <!-- Tanpa v-for -->
    <p><strong>Tanpa v-for</strong></p>
    <p>{{ listOrangSantuy }}</p>

    <!-- Dengan v-for -->
    <p><strong>Dengan v-for</strong></p>
    <ul>
        <li v-for="orangSantuy in listOrangSantuy">{{ orangSantuy }}</li>
    </ul>
    
    <!-- SISIPKAN DI SINI -->
    
    </div>
    <script src="vue.js"></script>

Di perulangan pertama <li v-for="orangSantuy in listOrangSantuy">, kita harus menggunakan titik pada expression {{ orangSantuy.nama }} jika ingin mengakses nilai dari property nama, sedangkan pada perulangan berikutnya <li v-for="mobil in orangSantuy.koleksiMobil">, titik sudah tidak diperlukan untuk mengakses nilai property mobil1, mobil2 dan mobil3. Di sini kita cukup menuliskan expression {{ mobil }} karena koleksiMobil tidak memiliki satu pun property berbentuk objek di dalamnya.

menggunakan directive v-for pada vue.js

Di materi berikutnya Menggunakan Directive v-if v-show v-else Pada Vue.js saya akan menunjukkan format v-for lainnya, yaitu v-for="(alias, index) in collection", sekaligus mengembangkan contoh yang ada di file latihan003.html agar dapat mengakomodir penggunaan directive v-if, v-show dan v-else.