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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-1

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-2

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-3

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-5

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-4

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-7

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

Membuat-aplikasi-todolist-vue-js-part-29-07-2017-12

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-9

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

Membuat-Aplikasi-TodoList-Vue-JS-Part4-29-07-2017-10

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

Membuat-aplikasi-todolist-vue-js-part-29-07-2017-12

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

28 Juli 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat