Pada kesempatan kali ini saya akan membahas tentang cara membuat looping sederhana dengan VueJs. Jadi data yang akan kita looping dibuat secara sementara sehingga sudah ditentukan jumlah datanya dan belum terhubung dengan database. Baiklah bagaimana cara membuatnya jangan kemana-mana simak terus langkah-langkah berikut ini:Langkah pertama 

  • Buat struktur HTML dan gunakan bootstrap agar mudah dalam memberikan style didalamnya untuk membuat template.

coba sahabat ikuti code berikut ini:

Langkah kedua 

  • Buat script untuk menampung declarasi datanya seperti dalam code berikut

    Langkah selanjutnya kita tampilkan data pada tabel tbody pada langkah pertama seperti code berikut

    jadi looping dari data lists dengan binding data berdasarkan id sebagai key.

Coba sekarang sahabat jalankan pada browser apakah hasil tampilnya seperti dibawah ini:

Membuat Looping Menggunakan VueJs dan Bootstrap

Saya juga ingin mencoba menambahkan data melalui console, ini hanya sebagai coba-coba saja karena tidak ada salahnya untuk selalu mencoba, heeee

1-Membuat Looping Menggunakan VueJs dan Bootstrap

Ternyata dicoba tambah manual bisa tinggal ketikkan pada console app.lists.push lalu isi data sesuai pada inputan deklarasi data sebelumnya.

Saya kira cukup dalam pembahasan tentang Cara Membuat Looping Sederhana Menggunakan VueJs dan Bootstrap. Sampai jumpa dalam kesempatan serta pembahasan lainnya. terima kasih