Halo teman-teman semuanya, di artikel sebelumnya kita semua telaj belajar bagaimana cara input data ke dalam database menggunakan RESTful API dan Vue Js Composition API. Di artikel kali ini kita semua akan belajar bersama-sama bagaimana cara membuat proses edit data dan kemudian mengupdate-nya.
Langkah 1 - Edit Data Post
Sekarang, kita akan melakukan perubahan kode yang ada di dalam view/component post edit. SIlahkan buka file src/views/post/Edit.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>EDIT POST</h4>
<hr>
<form @submit.prevent="update">
<div class="form-group">
<label for="title" class="font-weight-bold">TITLE</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
<!-- validation -->
<div v-if="validation.title" class="mt-2 alert alert-danger">
{{ validation.title[0] }}
</div>
</div>
<div class="form-group">
<label for="content" class="font-weight-bold">CONTENT</label>
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
<!-- validation -->
<div v-if="validation.content" class="mt-2 alert alert-danger">
{{ validation.content[0] }}
</div>
</div>
<button type="submit" class="btn btn-primary">SIMPAN</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
export default {
setup() {
//state posts
const post = reactive({
title: '',
content: ''
})
//state validation
const validation = ref([])
//vue router
const router = useRouter()
//vue router
const route = useRoute()
//mounted
onMounted(() => {
//get API from Laravel Backend
axios.get(`http://localhost:8000/api/post/${route.params.id}`)
.then(response => {
//assign state posts with response data
post.title = response.data.data.title
post.content = response.data.data.content
}).catch(error => {
console.log(error.response.data)
})
})
//method update
function update() {
let title = post.title
let content = post.content
axios.put(`http://localhost:8000/api/post/${route.params.id}`, {
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
})
}
//return
return {
post,
validation,
router,
update
}
}
}
</script>
<style>
body{
background: lightgray;
}
</style>
Di atas, pertama kita import reactive, ref dan hook onMounted dari Vue.
import { reactive, ref, onMounted } from 'vue'
kemudian kita import router dan route dari Vue Router.
import { useRouter, useRoute } from 'vue-router'
Dan kita juga import axios.
import axios from 'axios'
Kemudian, di dalam setup kita buat state post dengan jenis reactive.
//state posts
const post = reactive({
title: '',
content: ''
})
Selanjutnya kita buat state validation dengan jenis ref.
//state validation
const validation = ref([])
kemudian kita define variable router dan route.
//vue router
const router = useRouter()
//vue route
const route = useRoute()
router akan kita gunakan untuk mengarahkan ke halaman-halaman dari Vue Router. Sedangkan route akan kita gunakan untuk mendapatkan parameter ID dari URL.
Kemudian, di dalam hook onMounted kita memanggil data API berdasarkan ID, untuk mendapatkan detail dari data post untuk di tampilkan di dalam form edit.
//mounted
onMounted(() => {
//get API from Laravel Backend
axios.get(`http://localhost:8000/api/post/${route.params.id}`)
then(response => {
//assign state posts with response data
post.title = response.data.data.title
post.content = response.data.data.content
}).catch(error => {
console.log(error.response.data)
})
})
Di atas, bisa teman-teman perhatikan, hasil response yang di dapatkan dari Laravel akan di assign ke dalam state post.
//assign state posts with response data
post.title = response.data.data.title
post.content = response.data.data.content
Kemudian, di di dalam template kita bisa menampilkannya menggunakan directive v-model.
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
Kemudian, jika di dalam form, ketika kita melakukan submit maka akn menjalankan method dengan nama `update.
<form @submit.prevent="update">
//method update
function update() {
let title = post.title
let content = post.content
axios.put(`http://localhost:8000/api/post/${route.params.id}`, {
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 dalam method update di atas, kita akan mengirim data ke API Laravel dengan method PUT, kemudian jika data berhaasil di update, maka akan diarahkan/redirect ke dalam router dengan nama post.index.
Kemudian, jangan lupa untuk return semua function yang ada di dalam setup.
//return
return {
post,
validation,
router,
update
}
Langkah 2 - Uji Coba Edit dan Update Data
Sekarang, kita akan lakukan uji coba untuk menampilkan data yang akan di edit, kemudian mengupdatenya. Silahkan klik button EDIT, jika berhasil kurang lebih seperti berikut ini :
Kemudian, silahkan ubah datanya dan klik SIMPAN, jika berhasil maka data akan terupdate dan kita di arahkan ke halaman post.index.
Di atas, kita berhasil melakukan update data ke dalam database menggunakan Vue Js dengan Composition API dan RESTful API. Di artikel selanjutnya kita semua akan belajar membuat proses delete data post.
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