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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-1

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-2

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-3

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. 

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-4

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-5

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-6

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-7

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 

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-7

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-9

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 

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-10

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

Membuat-Aplikasi-TodoList-Vue-JS-Part2-22-07-2017-11

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

24 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat