API<<<

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('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.

{{ post.title }} {{ post.content }} EDIT DELETE

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.

EDIT

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.

TAMBAH POST

Di atas, kita panggil sebuah router dengan nama post.create, yang sebelumnya sudah kita buat di dalam routes.

Di atas, pertama kita import Reactivity API dari Vue.

import { reactive, ref } from 'vue'

Kemudian, kita import juga Vue Router.

import { useRouter } from 'vue-router'

Dan kita import juga axios.

import axios from 'axios'

Kemudian, di dalam setup kita define sebuah state dengan nama post, dimana state ini kita set menggunakan reactive.

//state posts const post = reactive({ title: '', content: '' })

reactive merupakan salah satu jenis Reactivity API, reactive digunakan untuk mengambil sebuah objek dan mengembalikan secara reaktif ke object aslinya.

kemudian, kita buat state validation dengan jenis ref.

//state validation const validation = ref([])

State di atas, akan di assign sebuah response error validation dari RESTful API Laravel.

Dan, untuk menggunakan Vue Router di dalam Composition API, kita menggunakan kode seperti berikut ini :

//vue router const router = useRouter()

Setelah itu, kita buat sebuah method dengan nama store, method ini akan di panggil jika form di submit.

Jika form di dalam template di submit, maka akan memanggil method store.

//method store function store() {

let title = post.title let content = post.content

axios.post('http://localhost:8000/api/post', { title: title, content: content }).then(() => {

  //redirect ke post index
  router.push({
     name: 'post.index'
  })

}).catch(error => { //assign state validation with error validation.value = error.response.data })

}

Di atas, kita melakukan send data ke dalam API Laravel dengan data title dan content. Kemudian jika data berhasil disimpan, kita akan di arahkan / redirect ke route dengan nama post.index.

//redirect ke post index router.push({ name: 'post.index' })

Jika data gagal disimpan/belum di isi, maka response error akan di assign ke state validation.

//assign state validation with error validation.value = error.response.data

Kemudian, di dalam template, untuk memanggil state post kita gunakan directive v-model, kurang lebih seperti berikut ini :

Dan untuk menampilkan validation, kita menggunakan kode seperti berikut ini :

Di atas, kita cek terlebih dahulu, apakah state validation memiliki key title, jika iya artinya ada error validation tentang title dari server. Kemudian untuk menampilkan pesan errornya kita menggunakan kode seperti berikut ini :

{{ validation.title[0] }}

Di atas, karena message terdapat di array ke 0, maka kita memanggilnya jadi seperti itu.