Vue+Vuetify : Cara Menggunakan VDialog/v-dialog agar menjadi Promise based komponen

Jika Anda menggunakan Vue dan Vuetify, maka VDialog / v-dialog mungkin merupakan komponen yang selalu Anda gunakan atau sering gunakan. Cara standar untuk menggunakan v-dialog adalah dengan meletakkannya di satu halaman yang membutuhkannya, lalu tampilkan-sembunyikan dialog menggunakan model-v

Metode ini sebenarnya dapat lebih disederhanakan, yaitu dengan memisahkan dialog menjadi komponen-komponen yang terpisah dan memanggilnya hanya dengan fungsi-fungsi tertentu, misalnya open () yang mengembalikan Promise.

Dengan metode di atas, Dialog Anda akan lebih terstruktur, modular, dan lebih sederhana karena Dialog dapat diimpor ke mana-mana dan lebih mudah karena hanya perlu menunggu respons dari Promise, baik itu diselesaikan atau ditolak. Tidak perlu bingung apakah tombol ditekan oleh pengguna, apakah itu OK atau SIMPAN atau MEMBATALKAN atau sesuatu yang lain, tetapi cukup untuk melihat data yang dikembalikan jika itu memutuskan atau menolak.

Berikut ini adalah contoh cara menggunakan dan menyederhanakan dialog untuk menjadi komponen berbasis promise-based

1. Memisahkan Dialog

Langkah pertama adalah memisahkan komponen Dialog yang anda buat. Kebiasaan saya pribadi adalah membuat folder bernama components di root folder yang berisi semua komponen global. Silahkan buat komponen Dialog anda (misalkan diberi nama MDialog) pada folder components tersebut atau pada folder lain yang anda inginkan. Kira-kira bentuk dari komponen MDialog tersebut adalah sebagai berikut.

Vue+Vuetify :Cara Menggunakan VDialog/v-dialog agar menjadi Promise based komponen

Scryipt Code :

Kami akan membuat komponen MDialog di atas sehingga kami hanya dapat menyebutnya dengan 1 metode / fungsi. Misalkan metode / fungsi disebut terbuka. Metode terbuka ini akan mengembalikan Janji di mana janji akan diselesaikan jika pengguna menekan tombol Ok, Tidak, Ya dan Tidak dengan pengembalian dalam bentuk String yang cocok dengan nama tombol, dan akan ditolak jika pengguna menekan tombol Batal. tombol.

2. Menambahkan methods Open yang mengembalikan Promise

Tambahkan pada data, dua buah variable yaitu resolve dan reject. Dimana resolve akan digunakan untuk menyimpan function resolve dan reject untuk function reject dari object Promise.

Tambahkan juga 1 buah method bernama open. Dimana pada method open tersebut akan secara otomatis membuat object Promise dan men-show dialog dengan cara men-set nilai data dialog dari false menjadi true.

perlu kita perhatikan dari methods open ini adalah, konstruktor kelas Promise yang memiliki
1 argumen yaitu sebuah function dengan 2 buah argumen berupa function, yaitu resolve dan reject.

new Promise(executor);

saat menginisialisasi objek Janji, fungsi penyelesaian kami disimpan dalam variabel penyelesaian / data dan fungsi tolak juga disimpan dalam variabel / data tolak. Perhatikan juga bahwa metode terbuka akan mengembalikan Janji secara langsung.

Jika Anda masih bingung dengan Promise, maka Anda harus mempelajari lebih lanjut tentang Promise, salah satunya dari tautan ini: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise.

Selanjutnya, kami membuat 2 metode untuk menutup dialog sebagai menyelesaikan dan menolak, misalnya kami beri nama itu diterima dan dibatalkan. Setiap metode ini menerima 1 argumen yang akan dikembalikan dalam Janji. Tujuan dari metode penerimaan ini adalah untuk menutup dialog dan memanggil fungsi resolusikan sehingga Janji akan masuk kemudian. Dan tujuan membatalkan adalah untuk menutup dialog dan memanggil fungsi tolak sehingga Janji akan masuk ke tangkapan.

methods: {
    open() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;

        this.dialog = true;
      });
    },
    accept(str) {
      this.dialog = false;
      this.resolve(str);
    },
    cancel(str) {
      this.dialog = false;
      this.reject(str);
    }
}

Selanjutnya kita pasang methods tersebut ke tombol-tombol yang sesuai.

Batal

Tidak

maka MDialog kita sudah selesai dan siap untuk digunakan.

3. Menggunakan komponen MDialog

Setelah komponen MDialog selesai, sekarang saatnya untuk menggunakan komponen tersebut. Dalam contoh ini, saya akan menggunakan komponen MDialog di halaman utama aplikasi saya, yang ada di App.vue (Ini hanya sebuah contoh dan tentu saja Anda dapat menggunakan komponen MDialog Anda di halaman mana pun).

Kira-kira inilah bentuk halaman utama aplikasi ini. Sangat sederhana, hanya ada 1 tombol untuk membuka Dialog dan 1 div untuk menampilkan hasil tombol yang ditekan pengguna.

Scryip Screenshot

jika user menekan tombol Open Dialog, maka dialog MDialog kita akan muncul. Kemudian apapun tombol yang ditekan user maka hasilnya akan ditampilkan di dalam div hasil tersebut di atas.

Langkah pertama adalah mendaftarkan komponen MDialog dengan terlebih dahulu meng-import file MDialog.

Selanjutnya tambahkan komponen MDialog ke dalam halaman/template. Silahkan tempatkan disembarang tempat, tetapi saya sarankan berada di paling bawah tetapi tetap harus ada di dalam 1 root komponen. Setelah itu tambahkan ref kepada MDialog tersebut, misalkan kita beri referensi bernama dlg.

Dengan menambahkan referensi (ref) ini, maka komponen MDialog tersebut di atas dapat di panggil via script dengan nama referensinya. Jika anda lupa atau kurang paham tentang apa itu ref dan $refs, silahkan cek penjelasannya di link berikut ini : https://vuejs.org/v2/api/#ref.

Selanjutnya, kita buat 1 buah methods untuk memanggil dan menampilkan MDialog beserta hasilnya. Dan tempatkan methods tersebut pada tombol Open Dialog.

Penjelasan:

this.$refs.open()

Statement di atas artinya kita memanggil komponen MDialog yang dalam hal ini dipanggil via $refs. Kemudian kita panggil methods open dari MDialog dimana methods open ini mengembalikan Promise.

.then(res => {
this.hasil = res;
})
.catch(res => {
this.hasil = res;
});

then adalah rantai yang akan dipanggil oleh Promise jika Promise tersebut resolve (User menekan tombol Ok, No, Ya, Tidak. Dan catch adalah rantai yang akan dipanggil oleh Promise jika Promise tersebut di reject (User menekan tombol Batal). Hasil dari Promise tersebut kemudian ditampilkan ke dalam div.

Itulah Tutorial Penjelasan dari berga tentang Cara menggunakan Vdialog menjadi Promise based komponen