Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar bagaimana cara memasukkan data ke dalam database di Nuxt Js dan Laravel Rest API, di artikel kali ini kita semua akan belajar bagaimana cara melakukan proses edit data dan update ke dalam database di Nuxt Js.
Langkah 1 - Menambahkan Button Edit
Pertama kita akan menambahkan button edit terlebih dahulu di halaman index post, silahkan buka file pages/post/index.vue kemudian cari kode berikut ini :
<b-table striped bordered hover :items="posts" :fields="fields" show-empty></b-table>
Kemudian ubah menjadi seperti berikut ini :
<b-table striped bordered hover :items="posts" :fields="fields" show-empty>
<template v-slot:cell(actions)="row">
<b-button :to="{name: 'post-edit-id', params: {id: row.item.id}}" variant="warning" size="sm">EDIT</b-button>
</template>
</b-table>
Di atas kita buat custom data rendering dengan menambahkan button edit di dalam table, yang mana untuk button edit link-nya akan mengarah ke dalam sebuah route yang bernama post-edit-id dan untuk parameternya kita ambil dari data ID dari post (row.item.id).
Sekarang jika halaman post dilihat, maka kita sudah mendapatkan button edit di dalamya, kurang lebih seperti berikut ini :
Langkah 2 - Membuat Page Edit Post
Sekarang kita lanjutkan untuk membuat page untuk menampilkan halaman edit post. Silahkan buat folder baru dengan nama edit di dalam folder pages/post dan di dalam folder edit silahkan buat file baru dengan nama _id.vue.
Di Nuxt Js untuk membuat URL secara dinamis, kita bisa membuat nama file dengan contoh _id.vue.
Sekarang silahkan buka file _id.vue tersebut dan masukkan kode berikut ini :
<template>
<b-container fluid="md" class="mt-5 mb-5">
<b-row>
<b-col md="12">
<b-card class="shadow-md border-0 rounded-lg">
<h5>EDIT POST</h5>
<hr>
<b-form @submit="update">
<b-form-group label="Title Post">
<b-form-input type="text" v-model="post.title" :class="{ 'is-invalid': validation.title }"
placeholder="masukkan title post">
</b-form-input>
<div v-if="validation.title" class="mt-2">
<b-alert show variant="danger">{{ validation.title[0] }}</b-alert>
</div>
</b-form-group>
<b-form-group label="Content Post">
<b-form-textarea id="textarea" v-model="post.content" :class="{ 'is-invalid': validation.title }"
placeholder="masukkan content post" rows="5">
</b-form-textarea>
<div v-if="validation.content" class="mt-2">
<b-alert show variant="danger">{{ validation.content[0] }}</b-alert>
</div>
</b-form-group>
<b-button type="submit" variant="primary">UPDATE</b-button>
</b-form>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
//state post
post: {
title: '',
content: ''
},
//state validation
validation: []
}
},
mounted() {
//get data post by ID
this.$axios.get(`/api/posts/${this.$route.params.id}`)
.then(response => {
this.post.title = response.data.data.title,
this.post.content = response.data.data.content
})
},
methods: {
async update(e) {
e.preventDefault()
//send data ke Rest API untuk update
await this.$axios.put(`/api/posts/${this.$route.params.id}`, {
//data yang dikirim
title: this.post.title,
content: this.post.content
})
.then(() => {
//redirect ke route "post"
this.$router.push({
name: 'post'
})
})
.catch(error => {
//assign error validasi
this.validation = error.response.data
})
}
}
}
</script>
<style>
</style>
Dari penambahan kode di atas, pertama kita buat 2 state baru di dalam data function, yaitu post dan validation. Untuk post di dalamnya kita buat 2 key yaitu title dan content.
Untuk state post nanti akan kita gunakan untuk menyimpan data yang di dapatkan dari Rest API dan selanjutnya akan ditampilkan ke dalam form untuk dilakukan proses edit data.
data() {
return {
//state post
post: {
title: '',
content: ''
,
//state validation
validation: []
}
},
Kemudian saat mounted, kita melakukan fething ke dalam endpoint Rest API dengan parameter ID yang kita dapatkan dari URL.
//get data post by ID
this.$axios.get(`/api/posts/${this.$route.params.id}`)
Dan jika proses fething berhasil, maka akan kita assign ke dalam state post, kurang lebih seperti berikut ini :
.then(response => {
this.post.title = response.data.data.title,
this.post.content = response.data.data.content
})
Kemudian kita buat sebuah method yang bernama update dan method ini akan dipanggil jika form di lakukan proses submit. Dimana di dalam method ini kita akan melakukan send data ke dalam endpoint Rest API untuk proses update menggunakan Axios dan methodnya adalah PUT.
//send data ke Rest API untuk update
await this.$axios.put(`/api/posts/${this.$route.params.id}`, {
//data yang dikirim
title: this.post.title,
content: this.post.content
})
Jika proses sending data berhasil, artinya data berhasil diupdate. Maka kita akan di arahkan ke dalam route yang bernama post.
.then(() => {
//redirect ke route "post"
this.$router.push({
name: 'post'
})
})
Tapi jika proses sending gagal, maka kita akan melakukan assign response errornya ke dalam state validation.
.catch(error => {
//assign error validasi
this.validation = error.response.data
})
Langkah 3 - Uji Coba Proses Edit dan Update
Sekarang kita akan lakukan ujo coba untuk melakukan proses edit dan update data, silahkan klik button EIDT dan jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Silahkan ubah data title dan content sesuai dengan yang diinginkan dan kemudian silahkan klik button UPDATE dan jika berhasil maka kurang lebih hasilnya seperti berikut ini :
Sampai disini proses edit dan update data di Nuxt Js dan Laravel Rest API, di artikel selanjutnya kita semua akan belajar bagaimana cara membuat fitur hapus data.
Terima Kasih