Tutorial Laravel 8 dan Vue Js 3 #7: Edit dan Update Data di Vue Js


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR