Halo teman-teman semuan, setelah berhasil melakukan proses insert data ke dalam database menggunakan Rest API di dalam Vue.js, maka sekarang kita akan lanjutkan belajar bagaimana caara melakukan proses edit dan update data di dalam Vue.js.
Langkah 1 - Menambahkan Button Edit
Pertama-tama, kita akan menambahkan button edit terlebih dahulu di halaman post index. Silahkan buka file src/views/posts/Index.vue, kemduian cari kode berikut ini :
<tbody>
<tr v-for="(post, index) in posts" :key="index">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center"></td>
</tr>
</tbody>
Dan ubahlah menjadi seperti berikut ini :
<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: 'posts.edit', params:{id: post.id }}" class="btn btn-sm btn-primary me-2">EDIT</router-link>
</td>
</tr>
</tbody>
Di atas, kita menambahkan 1 button baru dengan nama EDIT dan di dalamnya kita memanggil sebuah route yang bernama posts.edit dan untuk parameternya diambil dari ID post. Sekarang, jika kita lihat di halaman posts index, maka kita aka mendpatkan hasil seperti berikut ini :
Langkah 2 - Menambahkan Form Edit dan Proses Update
Setelah berhasil menambahkan button edit, sekarang kita lanjutkan untuk membuat sebuah form yang nanti digunakan untuk menampilkan data yang akan di edit dan update.
Silahkan buka file src/views/posts/Edit.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div class="container mt-custom">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>EDIT POST</h4>
<hr>
<div v-if="validation.errors" class="mt-2 alert alert-danger">
<ul class="mt-0 mb-0">
<li v-for="(error, index) in validation.errors" :key="index">{{ `${error.param} : ${error.msg}` }}</li>
</ul>
</div>
<form @submit.prevent="update">
<div class="form-group">
<label for="title" class="font-weight-bold mb-2">TITLE</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
</div>
<div class="form-group mt-3">
<label for="content" class="font-weight-bold mb-2">CONTENT</label>
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3">UPDATE</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 Backend
axios.get(`http://localhost:3000/api/posts/${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.patch(`http://localhost:3000/api/posts/update/${route.params.id}`, {
title: title,
content: content
}).then(() => {
//redirect ke post index
router.push({
name: 'posts.index'
})
}).catch(error => {
//assign state validation with error
validation.value = error.response.data
})
}
//return
return {
post,
validation,
router,
update
}
}
}
</script>
Dari perubahan kode di atas, pertama kita melakukan import Reactivity API dari Vue.js, yaitu reactive dan ref. Dan kita import juga hook onMounted.
import { reactive, ref, onMounted } from 'vue'
Steleha itu kita import 2 hook dari Vue Router, yaitu useRouter dan useRoute.
import { useRouter, useRoute } from 'vue-router'
Dan karena kita akan berhubungan dengan HTTP request, maka kita akan melakukan import Axios.
import axios from 'axios'
Di dalam method setup, pertama kita membuat sebuah state baru dengan nama post dan state tersebut kita atur menggunakan reactive. State ini akan digunakan untuk menerima input data yang diketik di dalam form.
//state posts
const post = reactive({
title: '',
content: ''
})
kemudian, kita buat state validation dengan jenis ref. State ini akan di assign sebuah response error validation dari Rest API yang di dapatkan dari backend Express.js
//state validation
const validation = ref([])
kemudian kita define variable router dan route. router akan kita gunakan untuk mengarahkan ke halaman-halaman dari Vue Router. Sedangkan route akan kita gunakan untuk mendapatkan parameter ID dari URL.
//vue router
const router = useRouter()
//vue route
const route = useRoute()
Kemudian, di dalam hook onMounted kita memanggil data API berdasarkan ID, untuk mendapatkan detail dari data post untuk di tampilkan di dalam form edit.
//get API from Backend
axios.get(`http://localhost:3000/api/posts/${route.params.id}`)
Jika proses fetching di atas berhasil, maka kita akan assign data responsenya ke dalam state post, yang mana nanti akan ditampilkan di form edit.
//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.
<label for="title" class="font-weight-bold mb-2">TITLE</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
<label for="content" class="font-weight-bold mb-2">CONTENT</label>
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
Dan jika kita perhatikan di dalam template untuk form action kita arahkan ke dalam method / function yang bernama update.
<form @submit.prevent="update">
//...
</form>
Dan di dalam function update, pertama kita buat 2 variable dulu untuk menyimpan data yang diketik di dalam form input.
let title = post.title
let content = post.content
Setelah itu, data tersebut kita akan kirim ke dalam endpoint Rest API menggunakan Axios dengan method PATCH.
axios.patch(`http://localhost:3000/api/posts/update/${route.params.id}`, {
title: title,
content: content
})
Jika data berhasil dikirimkan dan di update, maka kita akan melakukan redirect ke route yang bernama posts.index.
//redirect ke post index
router.push({
name: 'posts.index'
})
Tapi, jika proses update gagal dilakukan, maka kita akan melakukan assign response data error ke dalam state validation.
//assign state validation with error
validation.value = error.response.data
Kemudian, jangan lupa untuk return semua function yang ada di dalam setup.
//return
return {
post,
validation,
router,
update
}
Langkah 3 - Uji Coba Proses Edit dan Update
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 :
Silahkan ubah datanya sesuai dengan keinginan dan klik UPDATE, jika berhasil maka kita akan diarahkan ke dalam halaman post index dengan data yang telah diperbarui.
Sampai disini pembahasan bagaimana cara membuat proses edit dan update data di dalam Vue.js. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses delete data di dalam Vue.js.
Terima Kasih