Cara Membuat Aplikasi TodoList Vue JS Part 4

Kita masuk untuk bagian terakhir yaitu kita akan memanfaatkan property is_completed yang sebelumnya kita sudah buat yang nilai defaultnya adalah false. Jadi idenya sendiri misalnya bila list todosnya sudah selesai kita kerjakan kita akan coret list tugasnya dengan cara mengaktifkan class yang kita atur didalam CSS tentu langkah pertama yang harus kita lakukan adalah membuat tag <style> untuk membuat class completed nilainya sendiri adalah text-decoration: line-through seperti berikut

Jadi class CSS tersebut akan kita berikan efek sistem toggle dengan cara mengaktifkan atau menonaktifkan list todosnya. Untuk itu kita akan berikan tag <mark> yang diberikan directive v:bind class lalu isinya berupa object yang terdiri dari key dan value seperti ini

Keynya adalah completed sebagai nama class yang akan kita aktifkan sedangkan valuenya tergantung dari todo.is_completednya. Karena pada dasarnya todo.is_completed ini nilainya false dan property tersebut ada ketika kita kirim atau push todosnya

Karena awalnya false maka default classnya tidak aktif atau tidak tampil tapi setelah users klik link-nya maka kita akan ubah nilainya menjadi true atau aktif. Agar tag <a> -nya bisa di klik maka kita akan memberikan event on-click dengan menjalankan metode toggle dengan memasang parameter object todonya

Lalu kita pisahkan dengan koma untuk menuliskan metode toggle lalu menyediakan paramater sebagai object todonya seperti berikut

Maka didalam fungsinya kita sudah bisa akses semua property atau key dari Object Todo -nya. Salah satunya yaitu todo.is_completed dan bila teman teman console.log todo.is_completednya

Maka kita akan dapat hasil false diconsole browsernya karena otomatis property is_completed ini adalah false. Tentu yang kita lakukan adalah mengubah nilainya menjadi true tentu cara seperti ini tidak akan jadi masalah

Jadi tiap teman teman klik tombol donenya kita bisa lihat listnya todosnya kecoret karena class completednya diaktifkan.

Tentu teman teman bisa lihat di struktur DOM HTML -nya dibagian element consolenya tag <mark> sudah punya class completed sebagai berikut

Nah masalahnya kalo kita lakukan klik lagi dibagian buttonnya nilainya akan selalu true. Jadi yang bisa lakukan adalah membuat negasi dari nilai asli property is_completednya sebagai berikut

Jadi yang sebelumnya nilai false maka berubah menjadi true dan sebaliknya jika nilainya true maka berubah menjadi false. Sekarang kalo saya masukkan beberapa tugas untuk list todosnya maka saya sudah bisa menghapus atau pun melakukan sistem toggle untuk mengaktifkan atau menonaktifkannya list todosnya. Oke itu dia langkah langkahnya tentang cara membuat TodoList dengan bantuan Framework VueJS dan Semoga teman teman jelas. Sampai jumpa pada materi selanjutnya terima kasih.

Download