Halo teman-teman semuanya, di artikel sebelumnya kita semua telah banyak belajar tentang installasi dan konfigurasi library pendukung, seperti vue router, axiso dan lain-lain. Pada artikel kali ini kita semua akan belajar menampilkan data dari RESTful API di Vue Js menggunakan Composition API.
Langkah - Menampilkan Data Post
Sekarang, kita akan melakukan perubahan kode yang ada di dalam view/component post index. SIlahkan buka file src/views/post/Index.vue kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>DATA POST</h4>
<hr>
<router-link :to="{name: 'post.create'}" class="btn btn-md btn-success">TAMBAH POST</router-link>
<table class="table table-striped table-bordered mt-4">
<thead class="thead-dark">
<tr>
<th scope="col">TITLE</th>
<th scope="col">CONTENT</th>
<th scope="col">OPTIONS</th>
</tr>
</thead>
<tbody>
<tr v-for="(post, index) in posts" :key="index">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'post.edit', params:{id: post.id }}" class="btn btn-sm btn-primary mr-1">EDIT</router-link>
<button class="btn btn-sm btn-danger ml-1">DELETE</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
export default {
setup() {
//reactive state
let posts = ref([])
//mounted
onMounted(() => {
//get API from Laravel Backend
axios.get('http://localhost:8000/api/post')
.then(response => {
//assign state posts with response data
posts.value = response.data.data
}).catch(error => {
console.log(error.response.data)
})
})
//return
return {
posts
}
}
}
</script>
<style>
body{
background: lightgray;
}
</style>
Di atas, pertama kita import library axios, ini akan kita gunakan untuk melakukan HTTP request ke server untuk mendapatkan data posts.
import axios from 'axios'
Kemudian, kita import hook onMounted dan reactivity ref dari Vue.
import { onMounted, ref } from 'vue'
onMounted sama dengan mounted, yaitu salah satu lifecycle hook yang ada di dalam Vue, karena kita menggunakan Composition API, maka kita tambahkan on di depannya.
kemudian untuk ref merupakan fitur baru di Vue 3 yaitu Reactivity API, dimana digunakan untuk membuat sebuah variable menjadi reaktif, dan ref biasanya digunakan untuk penggunaan data primitif, seperti String, Boolean, Integer dan lain-lain. .
kemudian, untuk mendeklarasikan component menggunakan Composition API, kita gunakan function setup, dimana semua kode akan di letakkan di dalam function tersebut.
setup() {
// ...
}
Dan, di dalam function setup kita buat sebuah state dengan nama posts dan kita set menjadi reactive.
//reactive state
let posts = ref([])
CATATAN:
Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data menggunakan single objek .value.
Tapi untuk menampilkan di template kita tidak perlu menggunakan .value.
Setelah itu, di dalam hook onMounted kita melakukan request ke server API Laravel menggunakan axios, kemudian setelah data berhasil di dapatkan, maka akan di assign ke dalam state posts di atas.
//mounted
onMounted(() => {
//get API from Laravel Backend
axios.get('http://localhost:8000/api/post')
.then(response => {
//assign state posts with response data
posts.value = response.data.data
}).catch(error => {
console.log(error.response.data)
})
})
Di atas, bisa teman-teman perhatikan, kita set state posts dengan hasil response yang di dapatkan dari RESTful API Laravel, dan untuk set state tersebut kita menggunakan single objek .value.
//assign state posts with response data
posts.value = response.data.data
Setelah itu kita return state kita di atas, di dalam Composition API semua function dan method harus melakukan return agar dapat di di baca di dalam template.
//return
return {
posts,
}
Kemudian, untuk menampilkan di template, kita menggunakan perulangan dengan directive v-for.
<tr v-for="(post, index) in posts" :key="index">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'post.edit', params:{id: post.id }}" class="btn btn-sm btn-primary mr-1">EDIT</router-link>
<button class="btn btn-sm btn-danger ml-1">DELETE</button>
</td>
</tr>
Di atas, kita melakukan perulangan dari state posts, kemudian kita juga membuat sebuah link untuk edit data post, dimana kita panggil nama route dan kita tambahkan parameter id dari post tersebut.
<router-link :to="{name: 'post.edit', params:{id: post.id }}" class="btn btn-sm btn-primary mr-1">EDIT</router-link>
Dan untuk button DELETE, akan kita bahas di akhir seri tutorial ini.
Di dalam template kita juga menambahkan 1 button di atas, yang digunakan untuk mengarahkan kita ke dalam form create data post.
<router-link :to="{name: 'post.create'}" class="btn btn-md btn-success">TAMBAH POST</router-link>
Di atas, kita panggil sebuah router dengan nama post.create, yang sebelumnya sudah kita buat di dalam routes.
Langkah 2 - Uji Coba Project
Sekarang kita bisa mencoba menjalankan projecr-nya, silahkan buka di http://localhost:8080, jika berhasil, maka kita akan mendapatkan tampilan seperti berikut ini :
Di atas, kita sudah berhasil menampilkan data post dari RESTful API, karena kita belum mempunyai data apapun maka tidak ada data yang ditampilkan, di artikel selanjutnya kita semua akan belajar membuat proses input data ke dalam database melalui Vue Js dan RESTful API.
Terima Kasih.
EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue
EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire