Tutorial CRUD Laravel dan Nuxt Js #7 : Delete Data di Nuxt Js


Fika Ridaul Maulayya
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 telah belajar bersama-sama bagaimana cara membuat proses edit dan update data ke dalam database menggunakan Nuxt Js dan Rest API. Di artikel kali ini kita semua akan belajar bagaimana cara menghapus data di Nuxt Js.

Langkah 1 - Menambahkan Button Delete

Pertama kita akan menambahkan button delete terlebih dahulu di dalam halaman index post, silahkan buka file pages/post/index.vue kemudian cari kode berikut ini :

<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>

Kemudian ubah menjadi seperti berikut ini :

<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>
   <b-button variant="danger" size="sm" @click="deletePost(row)">DELETE</b-button>
</template>

Di atas kita menambahkan 1 button baru untuk proses delete data, dimana di dalam button tersebut kita berikan event @click yang mengarah ke dalam method yang bernama deletePost dan di dalamnya kita berikan parameter row. Parameter row tersebut berisi index array, dan juga data post.

Langkah 2 - Menambahkan Method deletePost

Setelah berhasil menambahkan button untuk proses delete post, sekarang kita lanjutkan untuk membuat method deletePost yang mana method ini akan kita gunakan untuk melakukan proses delete data ke dalam database melalui Rest API.

Masih di dalam file yang sama yaitu pages/post/index.vue pada bagian JavaScript silahkan ubah menjadi seperti berikut ini :

<script>
  export default {

    data() {
      return {
        //header table  
        fields: ['title', 'content', 'actions'],
        //posts data
        posts: [],
      }
    },

    mounted() {

      //fething ke Rest API 
      this.$axios.get('/api/posts')
        .then(response => {

          //assign response ke state "posts"
          this.posts = response.data.data

        })
        .catch(error => {
          console.log(error.response.data)
        })
    },

    methods: {

       async deletePost(row) {
        
        //delete data post by ID
        await this.$axios.delete(`/api/posts/${row.item.id}`)
          .then(() => {

            //remove item array by index
            this.posts.splice(row.index, 1);

          })

      }
    }

  }
</script>

Di atas kita menambahkan properti methods yang di dalamnya kita buat method baru dengan nama deletePost, dimana methos tersebut akan dijalankan jika button ddelete di klik.

Di dalam method deletePost pertama kita melakukan delete data ke dalam endpoint Rest API berdasarkan ID post yang di dapatkan dari row.item.id.

Dan jika proses delete data berhasil, maka kita juga akan melakukan splice atau menghapus item array berdasarkan index dari array tersebut.

//remove item array by index
this.posts.splice(row.index, 1);

Sekarang silahkan uji coba jalankan proses delete data dan jika berhasil kurang lebih seperti berikut ini :

Sampai disini pembahasan bagaimana cara membuat CRUD dengan Laravel dan Juga Nuxt Js, jika teman-teman mengalami kendala saat praktek bisa bertanya melalui kolom komentar arau bisa bertanya melalui group telegram yang disediakan oleh SantriKoding.

SOURCE CODE :

Terima Kasih



Fika Ridaul Maulayya
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