Cara membuat Modal di Vue.js - Laravel

wahyunanangwidodo

wahyunanangwidodo Rabu, 06 Januari 2021

Cara membuat Modal di Vue.js - Laravel

Jika sebelumnya telah melihat apa fungsi $emit di vue.js dengan contoh transfer data atau event ke parent, kali ini kita akan gunakan $emit atau costum event untuk membuat modal.

Kita akan buat komponen modal sebagai komonen anak dan kita import ke komponen parent dan  di buat event untuk memunculkannya.

Untuk pembuatan disini saya menggunakan project laravel yang sudah terinstal library vue dan bootstrap yang akan dibuat modal. Jika ingin membuat juga modal di laravel dengan komponen vue, silahakan install terlebih dahulu libary vue di laravel yang cara penginstalannya bisa dilihat melalui Cara install vue.js di laravel dan Cara install bootstrap di laravel. Atau tanpa laravel dan ingin menggunakan vue cli juga bisa.

Gambaran struktur file seperti dibawah ini.

Cara membuat Modal di Vue.js - Laravel

Kita akan buat dua komponen App.vue dan Modal.vue. App.vue merupakan komponen induk sebagai komponen parent dan Modal.vue merupakan komponen anak / child.

Di komponen Modal.vue kita buat html modal seperti dibawah.

<template>
  <div class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>
          <button type="button" class="btn btn-sm" v-on:click="closeModal">
          <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h1>Modal body</h1>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" v-on:click="closeModal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'modal',
   data(){
      return {
        //
      }
    },
    methods: {
      closeModal() {
        this.$emit('close-modal');
      },
    },
  };
</script>
<style scoped>
  .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: block;
  overflow: hidden;
  outline: 0;
  background-color: rgba(0, 0, 0, 0.6);
  }
</style>

Pada komponen Modal.vue di bagian button kita buat v-on directive dengan menambahkan method coloseModal(). Di dalam method closeModal() kita buat costum event atau $emit dengan nama event 'close-modal'.

Event klik dari button kita kirim ke parent yang akan menjalankan tugas atau fungsi yang kita buat; yaitu menutup modal.

Selanjutnya setelah dari komponen Modal.vue, kita import komponen ini dan didefinisikan dengan menyertakan event untuk di terima dan membuat tindakan.

Pada komponen App.vue atau parent kita import komponen Modal.vue dan buat seperti dibawah ini.

<template>
  <div class="container m-4">
    <button type="submit" class="btn btn-primary" @click="openModal">Open Modal</button>
    
    <modal v-show="isModalVisible" @close-modal="closeModal" />
  </div>
</template>

<script> 
import modal from './Modal' 
  
export default {
 components: {
   modal, 
 },
 data(){
   return {  
     isModalVisible: false,  
   }
 },  
 methods: {  
   openModal() { 
     this.isModalVisible = true;
   }, 
   closeModal() {
     this.isModalVisible = false;
   }, 
  }
}
</script>

Pada komponen Modal.vue yang sudah di import dan didefinisikan pada App.vue seperti diatas, kita buat v-show directive dengan properti isModalVisible untuk kondisional dan v-on directive yang dipersingkat @ dengan nama event yang di emit untuk didengarkan atau ditangkap.

Lalu pada event close-modal terdapat method yang akan menjalankan fungsi didalamnya; yaitu menutup modal dengan merubah kondisi properti isModalVisible menjadi false.

Kemudian pada button open modal sendiri kita buat event klik dengan method yang bernama openModal(). Ketika button di klik maka mothod openModal() akan menjalankan tidakan merubah properti isModalVisible yang diatur default nya false menjadi true, kemudian modal akan tampil.

Hasilnya akan seperti gambar dibawah ini.

Cara membuat Modal di Vue.js - Laravel

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.