Cara Membuat Aplikasi TodoList Vue JS Part 2

Pada bagian ini kita akan menjalankan metode atau pun membuat metode untuk VueJS -nya. Tapi sebelum itu kita akan menampilkan daftar list todosnya terlebih dahulu dibagian HTML -nya untuk itu kita buat tag <ul> dan <li> dengan memberikan attribute directive yang namanya v-for sebagai berikut

Yang akan kita tampilkan adalah property 'todos' tapi untuk mengaksesnya kita buat property baru yaitu 'todo' untuk menampilkan property name

dan bila kita reload browsernya maka kita belum dapat hasil apa apa begitupun untuk bagian consolenya belum ada errornya. Tentu teman teman juga bisa memberikan pengujian dengan directive v-if yaitu bila list todosnya tidak ada atau todosnya kosong maka kita akan memberikan pesan kecil sebagai berikut

dan bila ada maka otomatis akan tampil sebagai daftar list todosnya. Maka bila teman teman lihat sekarang dibrowser kita akan dapat pesan warning bahwa todosnya masih kosong. 

Setelah itu karena data kita tidak mau statis kita mau usersnya sendiri yang masukkin lists datanya maka dari itu kita akan buat satu input text lalu diberikan directive v-model namanya newTodo dan yang terakhir kita akan menjalankan satu event keyup enter artinya ketika keyboard enter ditekan maka kita akan memanggil metode addTodo. 

Untuk membuat metode di dalam Object Vuenya kita akan menambahkan satu key methods lalu menuliskan metode addTodo 

Yang gunanya untuk menyimpan todosnya tentu dia berbentuk function. Intinya kita akan melakukan metode push untuk memasukkan kedalam arraynya dengan menuliskan seperti ini

Sebagai catatan untuk mengakses property kita gunakan keyword this lalu di ikuti dengan nama propertynya yaitu todos. Jadi todos ini adalah property array objectnya. Untuk awal kita akan buat simple dengan menulis nama keynya adalah name dan valuenya dari inputan users yang sesuai dengan nilai directive dari v-modelnya yaitu this.newTodo 

Sebelum kita jalankan programnya kita akan melakukan validasi sederhana yaitu membuat variabel dengan nama newItem yang mana newItem ini adalah hasil nilai dari inputan users

Lalu kita akan menguji apabila newItemnya tidak kosong maka kita akan melakukan push nilai objectnya dan setelah di enter kita pun akan kosongkan inputan todosnya 

dan bila tidak ada kesalahan kita akan isi TodosListnya lalu dienter maka kita akan dapat hasil List Todosnya. 

Artinya sejauh ini kita sudah berhasil membuat dan menjalankan metode addTodonya. Kita akan lanjutkan dibagian selanjutnya. Terima kasih