Membuat List Rendering dengan v-for pada Vue

List Rendering adalah salah satu hal yang paling umum digunakan pada Front-End Web Development. List Rendering yang dinamis biasanya dapat berfungsi untuk menampilkan serangkaian informasi yang dikelompokkan dalam format yang ringkas dan tentunya User Friendly.

Sebagai contoh, mari kita lihat Website EL Creative Academy. Saat pertama kali kita membuka halaman utama, kita akan melihat tampilan seperti berikut:

Website EL Creative Academy

Di Website/Blog EL Creative Academy, kita dapat melihat Daftar Link Kategori dan Daftar Post terbaru.

Jika kita ingin membuat elemen List dengan Vue, hal pertama yang harus kita fikirkan untuk membuatnya adalah dengan menggunakan Directive v-for.


Directive v-for pada Vue

Directive v-for digunakan untuk menampilkan daftar item berdasarkan sumber data. Directive tersebut dapat digunakan pada elemen template dan membutuhkan Syntax tertentu di setiap baris item dalam items. di mana items adalah sekumpulan data (Data Collection) dan item adalah alias pada setiap elemen yang sedang di ulang (Iteration).

v-for item in items

Sekarang, mari kita lihat contoh sederhananya. Misalnya kita memiliki template yang dapat menampilkan daftar angka statis dalam urutan Ascending:

urutan Ascending

./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <ul>
            <li>1</li>
            <li>10</li>
            <li>100</li>
            <li>1000</li>
            <li>10000</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>

</html>

Lihat kode di Github | Lihat Live Demo

Jika kita memiliki daftar angka yang tersedia pada sekumpulan data (Data Collection) misalnya pada Array yang ada di dalam Vue Instance. Berikut adalah contoh kode dari Vue:
./main.js

new Vue({
    el: '#aplikasi',
    data: {
        angka: [1, 10, 100, 1000, 10000],
    },
});


Kita tidak perlu mengulangi elemen <li> pada template melainkan hanya meminta Directive v-for untuk melakukan apa yang kita inginkan. Karena angka adalah Array yang ingin kita tampilakan, maka angka akan menjadi alias yang tepat untuk digunakan. Kita juga akan menambahkan Directive v-for pada elemen yang ingin kita ulangi - yaitu elemen <li>. Contoh:
./index2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <ul>
            <li v-for="angka in angka1">{{ angka }}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>

</html>


Pada contoh kode diatas, kita telah menggunakan Mustache Syntax untuk mengikat (Bind) alias angka pada konten dari elemen yang ingin diulang karena kita hanya ingin menampilkan angka pada Array.

Sekarang, Directive v-for akan menampilkan daftar statis dari Data Array angka1:

menampilkan daftar statis dari Data Array angka1

Lihat kode di Github | Lihat Live Demo

Selain membantu kita untuk membuat Template agar tidak selalu mengulang (Don't Repeat Yourself), Directive v-for juga dapat membuat aplikasi yang kita buat dapat menjadi Dinamis. Terlepas dari perubahan pada Array.

Atribut key pada Vue

Atribut key adalah atribut untuk menentukan atribut key pada setiap elemen yang diulang dalam daftar v-for. Atribut key biasanya digunakan untuk membuat Binding yang unik pada setiap Node.

Jika terdapat perubahan UI yang dinamis pada daftar atau List (misnya Daftar angka akan menjadi acak), Vue akan (secara default) mengubah data dalam setiap elemen untuk memindahkan elemen DOM tersebut. Perubahan tersebut bukanlah suatu masalah bagi kita. Tetapi, dalam berbagai hal tertentu di mana daftar v-for akan bergantung pada DOM dan/atau komponen Child serta dapat menyebabkan beberapa hal yang tidak diinginkan.

Sekarang, mari kita lihat contohnya. Jika kita hanya ingin merender konten angka pada setiap elemen, kita dapat me-render nilai dari angka dan elemen input untuk setiap angka di dalam array angka1:
./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <ul>
            <li v-for="angka in angka1">
                <p>{{ angka }}</p>
                <input placeholder="Ketikkan Sesuatu..." />
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>

</html>


Misalnya, kita ingin menampilkan fitur baru pada aplikasi yang kita buat. Fitur tersebut berfungsi untuk mengizinkan pengguna untuk menampilkan daftar (List) secara acak. Untuk melakukannya, kita dapat memasukkan tombol "Acak!" kedalam template HTML tepat setelah elemen <ul>:

./index2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <ul>
            <li v-for="angka in angka1">
                <p>{{ angka }}</p>
                <input placeholder="Ketikkan Sesuatu..." />
            </li>
        </ul>
        <button @click="acak">Acak!</button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.js"></script>
    <script src="./main.js"></script>
</body>

</html>


Pada kode diatas, kita telah memasukkan Event Click Listener pada elemen button untuk memanggil metode acak ketika kita mengekliknya. Kita juga menambahkan tag <script> baru pada Template yang memiliki atribut src tertuju pada Utility Library yaitu Lodash melalui CDN. Kita menggunakan Lodash untuk membantu kita dalam membuat fungsi acak pada List yang kita buat.

Pada Vue Instance, kita akan membuat metode acak yang berfungsi untuk mengacak urutan dari koleksi angka pada Array angka1. Disini, kita juga akan menggunakan metode _.shuffle dari Lodash:
./main.js

new Vue({
    el: '#aplikasi',
    data: {
        angka1: [1, 10, 100, 1000, 10000],
    },
    methods: {
        acak() {
            this.angka1 = _.shuffle(this.angka1)
        }
    }
});


Info: Lodash adalah Utility Library JavaScript yang dapat menyediakan sekumpulan metode tambahan agar dapat membantu kita dalam berinteraksi dengan Array, Object, Angka, String, dll. Pada aplikasi yang kita buat, kita telah menggunakan metode _.shuffle yang berfungsi untuk mengacak Array dengan sebuah version dari Fisher-Yates Algorithm.

Jika kita membuka contoh diatas dan mengeklik tombol Acak beberapa kali; kita akan melihat angka yang ada pada List menjadi teracak.

angka yang ada pada List menjadi teracak

Lihat kode di Github | Lihat Live Demo

Tetapi, jika kita mengetikkan sesuatu pada elemen input kemudian mengeklik tombol Acak!; kita akan melihat hal seperti berikut:

Tombol Acak

Meskipun setiap elemen List yang terender terdiri dari elemen input dan angka yang sudah ada, ketika kita mengkilk tombol Acak! - Hanya angka yang dapat ter-acak. Hal tersebut dapat terjadi karena kita belum menentukan atribut key, Vue juga belum memiliki Binding pada setiap itemnya. Akibatnya, ketika kita ingin mengatur ulang item yang ada di dalam List, Vue hanya meningkatkan kinerja dengan mengubah data pada setiap elemen.

Untuk mengatasinya, kita perlu memasukkan key pada setiap elemen yang ingin dirender pada List. Atribut key untuk setiap elemen juga harus unik atau berbeda. Jadi, mari kita atur ulang data angka yang kita miliki menjadi objek yang terdiri dari properti id dan nilai:
./main2.js

new Vue({
    el: '#aplikasi',
    data: {
        angka1: [
            { id: 1, nilai: 1 },
            { id: 2, nilai: 10 },
            { id: 3, nilai: 100 },
            { id: 4, nilai: 1000 },
            { id: 5, nilai: 10000 }
        ],
    },
    methods: {
        acak() {
            this.angka1 = _.shuffle(this.angka1)
        }
    }
});


Pada Template, kita harus mereferensikan angka.nilai sebagai konten yang ingin dirender dan kita akan menggunakan Directive v-bind untuk mengikat angka.id sebagai atribut key untuk Directive v-for:
./index3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <ul>
            <li v-for="angka in angka1" :key="angka.id">
                <p>{{ angka.nilai }}</p>
                <input placeholder="Ketikkan Sesuatu..." />
            </li>
        </ul>
        <button @click="acak">Acak!</button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.js"></script>
    <script src="./main2.js"></script>
</body>

</html>


Sekarang, Vue akan memahami setiap elemen List dan mengatur urutan elemen ketika kita ingin mengacaknya. Sebagai hasilnya, kalian dapat mengetikkan sesuatu kedalam elemen input dan klik tombol Acak!:

Shuffle

Lihat kode di Github | Lihat Live Demo

Haruskah kita selalu menggunakan atribut key? Ya, karena sangat direkomendasikan. Menurut Dokumentasi dari Vue, atribut key boleh tidak digunakan jika:
  • Kita ingin menggunakan cara Standar untuk mengubah elemen karena alasan Performa.
  • Konten DOM cukup sederhana.

Mudah bukan? Mungkin pada bagian selanjutnya kita akan membahas tentang Directive v-model. Jadi, jangan lupa kembali lagi ke serial Vue ini ya. Semoga bermanfaat dan terimakasih.

0 Komentar