Tugas Akhir
Penjelasan
Sekarang saatnya menggabungkan semua yang sudah dipelajari — dari template syntax sampai composables — jadi satu aplikasi utuh. Kamu akan membuat aplikasi Todo List sederhana yang menggabungkan ref, v-model, v-for dengan key, computed, dan conditional rendering.
Tugas
Buat komponen TodoApp.vue dengan ref() daftarTodo (array objek {id, teks, selesai}) dan inputBaru (string, v-model). Buat form untuk menambah todo baru ke daftarTodo (id bisa pakai Date.now() atau counter manual). Tampilkan daftarTodo lewat v-for dengan :key unik, tiap item punya checkbox (v-model ke item.selesai) dan tombol hapus. Buat computed() jumlahSelesai yang menghitung berapa todo yang sudah selesai, tampilkan ringkasan "{{ jumlahSelesai }} dari {{ daftarTodo.length }} todo selesai" di bagian atas.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Kalau bingung mulai dari mana, kerjakan tambahTodo() dan render list-nya dulu (tanpa checkbox/hapus), cek hasilnya di browser, baru tambahkan v-model untuk checkbox dan hapusTodo() satu per satu. Program besar selalu lebih mudah kalau dipecah jadi langkah-langkah kecil.