Tutorial Vue Js - Cara Melakukan Perulangan Menggunakan V-FOR

Assalmualaukum, wr. wb. teman-teman. Jika sebelumnya kita sudah belajar tentang Coditional Rendering, kali ini kita akan belajar Looping menggunakan v-for. Buat kalian yang belum tahu, bahwa pada tutorial vue js ini saya menggunakan code editor online yaitu Codepen. Untuk bagaimana cara penggunaannya silahkan lihati Disini.

Langsung aja, pertama-tama kita buat script Vue-nya seperti berikut ini.

• Baris 4: Kita buat object dengan nama fruits yang memiliki data berupa array.
• Baris 5: Kita buat object dengan nama parent yang value string.
• Baris 6 -10: Kita buat object dengan nama todos yang memiliki object dengan nama text yang disimpan dalam bentuk array.
• Baris 11 -15: Kita buat object dengan nama biodata yang memiliki 3 object dengan nama key yang berbeda, yaitu name, age, dan address.

Selanjutnya ketikkan script HTML-nya seperti berikut ini.

• Baris 2 - 6: Kita menampilkan data (yang disimpan dalam array) pada object fruits tadi dengan syntax seperti di atas.
• Baris 7 - 11:  Selain cara pertama, kita juga dapat menampilkannya bersama dengan object lain, dalam contoh di atas kita menampilkan object parent, index (bawaan vue) serta todo.text (cara memanggil jika data dalam bentuk object).
• Baris 12 - 16: Kita menampilkan object biodata dengan hanya sekali panggil.  
• Baris 17 - 22: Kita juga dapat memanggil beserta key dan value nya.

Jika sudah selesai, maka hasilnya akan seperti berikut.

See the Pen Vue JS V-FOR by indeveloper.id (@muhammad-jauhar-fuadi) on CodePen.

Jadi ada 3 poin yang kita pelajari dari tutorial kali ini:

1. Cara menampilkan data dalam bentuk array.
2. Cara menampilkan data dalam bentuk object.
3. Cara menampilkan data key dan value.

Oke sekian tutorial kali ini semoga bermanfaat, Wassalamualaikum, wr. wb.