Membuat Blog dengan Laravel & VueJS - #7 | Respon pesan berhasil

Kita telah menyelesaikan pembuatan halaman untuk pembuatan postingan serta fungsi agar data tersebut dapat tersimpan ke database. Tapi kita belum sepenuhnya menyelesaikan halaman ini, kita akan melanjutkannaya dengan memberi respon berupa pesan dimana ketika saat pembuatan pos baru dan data berhasil disimpan maka akan tampil.

Langsung saja, silahkan ikuti langkah-langkah dibawah ini:

Pertama kita akan buat dulu pesan apa yang akan ditampilkan setelah post baru berhasil disimpan.

//CreatePost.vue
...
<div class="admin-page-title">Create New Post</div>
  
  <span v-if="successful" class="label label-success">
    <h4>Saved Successfully!</h4>
    <small>(Post baru berhasil dibuat dan dipublikasi!)</small>
  </span>

<div class="_wrap-form">
...

Diatas kita tambahkan elemen span, dimana didalamnya kita tambahkan directive v-if serta pesan yang akan ditampilkan. Silahkan dicopy dan paste pada komponen CreatePost.vue.

Kemudian setelah itu kita buat data dan properti.

//CreatePost.vue
data:function() {
  return { 
    successful: false, 
  };
},

Diatas kita menambahkan properti successful dan properti tersebut kita buat false. Yang artinya adalah kondisi pesan tersebut tidak ditampilan. Pesan yang tidak tampil tersebut akan muncul setelah data berhasil terkirim atau disimpan.

Untuk menampilkan pesan tersebut, kita akan membuat response dengan memanggil properti successful dan kita ubah statement nya yang awal false menjadi true.

//CreatePost.vue
...
axios.post("/api/posts", formData)
  .then(response => {
     this.successful = true; 
     console.log(response.data);
   })
... 

Setelah itu kita buat juga style'nya.

//CreatePost.vue
<style scoped>
  .label-success{
    background-color: #4fca6b;
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 8px 15px;
  }
  .label-success h4{
    margin-bottom: 0;
  }
</style>

Hasil akhir komponen CreatePost.vue:

//CreatePost.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Create New Post</div>
  
    <span v-if="successful" class="label label-success">
      <h4>Saved Successfully!</h4>
      <small>(Post baru berhasil dibuat dan dipublikasi!)</small>
    </span>

      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <input type="title" class="form-control" ref="title" id="title" placeholder="Title">
          </div> 
          <div class="form-group">
            <textarea class="form-control" id="body" ref="body" placeholder="Body" rows="8"></textarea>
          </div>
          <button type="submit" @click.prevent="create" class="btn btn-primary">
            Submit
          </button>   
        </form><br><br><br>
      </div>
    </div>
</template>

<script>
  export default{
    props:{
      userId:{
        type: Number,
        required : true
      }
    },
    data:function(){
      return{
        successful: false
      }
    },
    methods:{
      create(){
        const formData = new FormData();
        formData.append('title', this.$refs.title.value);
        formData.append('body', this.$refs.body.value);
        formData.append('user_id', this.userId);

        axios.post('/api/posts', formData)
          .then(response => {
            console.log(response.data);
            this.successful = true
          });
          this.$refs.title.value = "";
          this.$refs.body.value = "";
      }
    }

  }
</script>

Hasilnya akan seperti gambar dibawah: