Vue.js: Lists

Di dunia pemrograman kita lebih sering menjumpai dan bekerja dengan array daripada hanya berupa string. Di vue.js kita gunakan v-for untuk mem-filter list item dan me-render-nya di halaman.

Berikut ini contoh penggunaan vue pada list items:

Contoh sederhana menampilkan list item

Apabila HTML tersebut kita buka di browser maka akan menampilkan seperti ini:

Dari contoh tersebut kita hanya sebatas menampilkan data dari suatu array. Bagaimana jika kita ingin menambahkan data ke array tersebut? Pertama-tama kita akan membuat sebuah input text dan tombol untuk melakukan aksi tersebut. Aksi yang kita inginkan adalah ketika kita mengetikkan sesuatu di dalam input text dan menekan tombol secara otomatis nilai dari input text kita masukkan kedalam array dan teks di input text kita kosongkan. Berikut ini contoh kodenya:

Kurang lebih hasilnya akan seperti ini:

Kode diatas bekerja dengan baik sesuai dengan keinginan kita namun kode tersebut dapat dibilang merupakan cara tradisional karena masih menggunakan cara javascript untuk menambahkan even listener dan masuk ke DOM untuk fetch nilai input barulah kemudian melakukan push data ke array. Berikut ini adalah kode yang memberikan hasil yang sama dengan kode tersebut diatas namun versi yang lebih sederhana. Dengan menggunakan v-on directive untuk me-register event listener. Berikut ini kodenya:

Untuk mempersingkat penulisan v-on:click kita dapat menggantinya dengan hanya menuliskan @click , keduanya memberikan hasil yang sama.

Apa yang dapat kita pelajari dari tulisan saya yang cukup singkat ini?

1. Gunakan v-for untuk mem-filter list item dan me-render-nya di halaman
2. Gunakan v-on directive untuk me-register event listener
3. Gunakan @click untuk mempersingkat penulisan v-on:click

Sekian dari saya, sampai jumpa di tulisan saya selanjutnya.