Cara Membuat Aplikasi TodoList Vue JS Part 9

11/09/2017    Ekky Ridyanto    1523    Website

Kita lanjutkan kembali dalam Membuat Aplikasi TodoList dengan Vue JS. Pada bagian sebelumnya kita sudah setting servernya untuk menampilkan data. Lalu cara untuk mendapatkan atau menerima hasil response dari servernya kita akan meletakkan dibagian metode ready dengan melakukan request ke server dengan menuliskan this.$http lalu kurung kurawalnya dalam bentuk object seperti ini

Optionsnya ada URLnya yaitu kita arahkan kedalam file server.php yang berada pada folder resource dan Option Method yang kita gunakan adalah Metode GET sebagai berikut

Lalu berikutnya bila requestnya berhasil kita akan terima hasil responsenya sebagai parameter response dari fungsi then -nya.

Nah yang mau kita lakukan didalam fungsinya adalah kita akan masukkan hasil response.datanya kedalam property this.todosnya seperti berikut

Kenapa response.body? karena response.body ini adalah hasil data dalam bentuk object yang akan kita tampilkan. Karena jika teman teman hanya menuliskan response saja yang akan kita dapatkan adalah semua responsenya termasuk http status codenya.
Note: Bila menggunakan Vue JS Versi 1.0 gunakan response.data bukan response.body.

Kita akan testing dulu apakah berhasil atau tidak? Kita reload halamannya maka kita sudah berhasil mengambil semua data dari database.

Cukup simple jadi sejauh ini tidak ada masalah dan tidak ada error juga. Bila teman teman lihat sekarang hasil datanya sudah tampil tapi masih ada kesalahan yang harus kita perbaiki. Karena seharusnya bila nilai is_completednya 1 maka list todosnya kecoret tapi malah semua list todosnya kecoret. Kenapa ? karena server otomatis akan mengembalikan datanya dalam bentuk string. Untuk itu kita akan melakukan sedikit pengujian pada v-bind classnya dengan mengaktifkan class completed.
maka dari itu kita akan melakukan ternary operator dengan menentukan (syarat/kondisi) ? jikabenar : jikasalah

Jadi kita gunakan metode dari javascript yaitu typeof untuk menguji apakah nilai completednya itu sama dengan string maka kita akan memberikan metode parseInt pada todo.is_completednya untuk mengubah tipe data string menjadi integer/number tapi bila is_completednya sudah bertipe integer maka kita akan mengembalikan nilai asli dari property is_completednya dan bila teman klik bagian tombol donenya maka kita akan lihat perubahannya list todosnya. Tentu tugas berikutnya kita akan melakukan metode POST untuk mengirim data keserver agar dapat disimpan kedatabase. Terima Kasih

Artikel, Web Design, Javascript, website