Cara Membuat Aplikasi TodoList Vue JS Part 9

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

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-1

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

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-2

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

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-3

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

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-4

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.

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-5

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

cara-membuat-aplikasi-todolist-vue-js-part-8-11-09-2017-6

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

11 September 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