AdityaDees

Visual Studio Code adalah sebuah text editor gratis buatan Microsoft yang saat ini merupakan salah satu editor yang paling populer terutama di antara para developer web. VSCode sendiri saat ini sudah tersedia di semua platform, baik Windows, Linux maupun Mac. Namun, kali ini kita hanya akan membahas cara install vscode di Ubuntu Linux.

Agar mudah dipahami terutama oleh para pengguna Ubuntu Linux yang mungkin masih awal, maka cara install vscode ini akan diutamakan dengan berbasis GUI.

Sebelum itu, untuk Anda para pengguna Ubuntu Linux, pastikan saat ini Anda menggunakan Ubuntu Linux versi 64bit. Hal ini dikarenakan, saat ini VSCode HANYA mensupport mesin 64bit saja. Sedangkan mesin 32bit sudah TIDAK lagi disupport. Sangat disayangkan memang, akan tetapi untuk masa sekarang memang boleh dibilang hampir semua mesin komputer yang baru sudah menggunakan arsitektur 64bit.

---

Baca juga :
Cara mudah menginstall PHP Composer di Ubuntu Linux

---

Untuk mengetahui arsitektur dari Ubuntu Anda, bisa dilakukan dengan mengetikkan perintah uname -a di terminal. Jika Ubuntu Anda menggunakan arsitektur 64bit, maka akan terdapat tulisan seperti x86_64 atau yang sejenis itu.

Setelah Anda memastikan bahwa mesin dan versi Ubuntu Anda adalah 64bit, maka langkah pertama adalah silahkan unduh file installer/package vscode dari situs resminya di sini : https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64 .
Silahkan simpan file .deb tersebut di tempat yang Anda inginkan.

Selanjutnya kita akan meng-install file tersebut. Kali ini kita akan mencoba install baik dengan menggunakan GUI maupun terminal. Silahkan Anda pilih salah satu, apakah itu dengan menggunakan GUI atau cli/terminal.

1. Install dengan menggunakan GUI

Selanjutnya, silahkan Anda menuju file tersebut dengan menggunakan file explorer baik itu Nautilus atau yang lainnya. Jika file di atas sudah ditemukan, maka silahkan dobel klik file tersebut. Ini sama dengan jika Anda di Windows yaitu dengan dobel klik file installer. Maka akan muncul tampilan seperti gambar di bawah ini.

Klik tombol Install Package. Kemudian jika muncul input password, silahkan Anda isikan password Anda. Di sini saya berasumsi bahwa role Anda adalah Administrator, karena jika role Anda adalah user biasa, maka Anda tidak akan bisa meng-install aplikasi.

Setelah Anda tuliskan password, tekan tombol OK. Maka proses install akan dimulai. Silahkan tunggu sampai proses selesai.

2. Install dengan menggunakan cli/terminal

Setelah Anda berhasil mengunduh file installer vscode. Silahkan Anda jalankan terminal kesayangan Anda. Kemudian silahkan ubah directory aktif ke folder tempat Anda menyimpan file installer di atas. Misalkan Anda menyimpan file .deb di atas ke dalam folder ~/Downloads , maka perintah pindah direktori aktif adalah :

cd ~/Downloads

Kemudian jalankan perintah dpkg -i nama_file untuk menginstall. Misalkan file tersebut bernama : code_1.59.1-1629375198_amd64.deb, maka perintahnya adalah :

sudo dpkg -i code_1.59.1-1629375198_amd64.deb

Tuliskan password Anda, kemudian silahkan tunggu proses install selesai.

Jika semuanya berjalan lancar, maka Anda sudah berhasil meng-install Visual Studio Code di Ubuntu Linux. Biasanya menu icon vscode akan muncul pada start menu Applications / Programming. Tetapi ini bisa berbeda tergantung distro turuan Ubuntu yang anda gunakan.

Penutup

Jika Anda menginstall VSCode dengan menggunakan file installer atau package seperti 2 cara di atas, maka secara otomatis file installer ini akan meregistrasikan repository official vscode ini ke dalam repository package Ubuntu Anda. Oleh karena itu Anda dikemudian hari cukup melakukan apt update dan apt upgrade secara periodik, untuk meng-update Visual Studio Code.

Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Jika Anda membuat sebuah webapp atau blog atau yang sejenis dengan menggunakan vue.js, maka Anda mungkin akan menemui sedikit masalah yang mengganggu, yaitu kadang akan muncul seperti flicker karakter {{ }} pada saat halaman terbuka. Memang hanya beberapa milisecond saja, tetapi lama kelamaan akan terasa sangat mengganggu. Masalah ini hampir pasti muncul pada saat Anda menggunakan vue.js tidak sebagai SPA, melainkan sebagai library biasa yang digunakan langsung di halaman web. Lalu apa penyabab masalah flicker ini dan bagaimana solusinya ?

Masalah flicker ini disebabkan oleh proses rendering template vue yang di dalamnya terdapat mustache tag yaitu {{ }}. Proses rendering template ini akan dilakukan setelah vue.js selesai di load oleh Browser, sehingga ada jeda waktu antara loading library vue.js dan halaman web yang sudah terlanjur muncul.

Ada berapa solusi yang bisa dicoba untuk menghindari flicker ini terjadi. Beberapa diantaranya adalah sebagai berikut.

1. Mengubah posisi loading vue.js dari sebelum akhir body menjadi di atas body.

Jika dalam kondisi normal Anda biasanya menempatkan posisi script di bagian akhir dari body, seperti contoh di bawah ini :

<!DOCTYPE html>
<html>
  <head>
    <title>Apa kabar dunia</title>
    <style>
      .tengah {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3 class="tengah">{{ message }}</h3>
      <span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Apa kabar dunia",
          nama : "Fulan bin Fulan",
          alamat : "Indonesia"
        }
      });
    </script>
  </body>
</html>

Pada kode di atas, vue.js di load dari cdn.jsdelivr.net diposisi akhir body, sebelum script aplikasi. Kode dengan pola seperti inilah yang akan menyebabkan ada flicker {{ message }} selama beberapa saat.

Untuk menghilangkan flicker, cara yang paling mudah adalah dengan memindahkan loading vue.js ke head, seperti contoh di bawah ini.

<!DOCTYPE html>
<html>
  <head>
    <title>Apa kabar dunia</title>
    <style>
      .tengah {
        text-align: center;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3 class="tengah">{{ message }}</h3>
      <span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
    </div>    
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Apa kabar dunia",
          nama : "Fulan bin Fulan",
          alamat : "Indonesia"
        }
      });
    </script>
  </body>
</html>

Cara ini sangat mudah, tetapi sebenarnya sangat tidak disarankan, karena akan menambah loading time dari halaman web. Ada blocking time dimana browser akan menunggu sampai dengan vue.js selesai di get dari server baru melanjutkan proses render. Jadi, jika anda memilih untuk menggunakan solusi ini, pastikan anda menggunakan library vue.js versi production.

2. Menggunakan v-text

Alternatif lain untuk menghilangkan flicker adalah dengan menggunakan v-text pada tag tempat mustache tag berada. Untuk contoh di atas, kita bisa pindahkan {{ message }} , dan {{ nama }} dan {{ alamat }} masing-masing ke dalam blok dimana dia berada.

<!DOCTYPE html>
<html>
  <head>
    <title>Apa kabar dunia</title>
    <style>
      .tengah {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3 class="tengah" v-text="message"></h3>
      <span>Halo, perkenalkan nama saya <b v-text="nama"></b>, saya saat ini tinggal di <b v-text="alamat"></b>.</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Apa kabar dunia",
          nama : "Fulan bin Fulan",
          alamat : "Indonesia"
        }
      });
    </script>
  </body>
</html>

Dengan menggunakan solusi ini, maka flicker akan hilang dikarenakan meskipun vue.js ditempatkan di akhir body, akan tetapi karena di dalam div tersebut kosong, maka tidak akan ada yang di render pada saat awal halaman tersebut muncul. Bandingkan dengan sebelumnya yang di dalam divterdapat mustache tag {{ message }}.

Akan tetapi, solusi ini hanya cocok jika Anda menggunakan sedikit mustache tag. Jika Anda menggunakan banyak sekali mustache tag, maka Anda mungkin akan kerepotan karena harus mengganti mustache tag menjadi v-text dibanyak tempat.

3. Menggunakan v-cloak

Mungkin solusi ini yang paling cocok disebagian besar keadaan. Yaitu dengan menggunakan v-clock untuk menyembunyikan mustache tag sampai dengan library vue.js selesai di-load oleh browser. Untuk menggunakan fitur v-cloak ini, langkah pertama yang harus dilakukan adalah menambahkan css untuk meng-hidden v-cloak secara default. Silahkan tambahkan css ini ke dalam head atau external css di dalam head.

<style>
    [v-cloak] {display: none}
</style>

Kemudian, silahkan tambahkan v-cloak pada blok yang terdapat mustache tag. Pada contoh di atas adalah pada div.

<!DOCTYPE html>
<html>
  <head>
    <title>Apa kabar dunia</title>
    <style>
      [v-cloak] {display: none}
      .tengah {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <h3 class="tengah">{{ message }}</h3>
      <span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Apa kabar dunia",
          nama : "Fulan bin Fulan",
          alamat : "Indonesia"
        }
      });
    </script>
  </body>
</html>

Dengan menggunakan v-cloak ini, Anda hanya perlu menambahkan 1 baris css dan menempatkan v-cloak hanya di 1 tempat saja (di-root aplikasi) atau mungkin hanya di beberapa tempat saja. Bandingkan dengan jika Anda menggunakan v-text, dimana Anda harus menambahkan v-text disemua tempat yang menggunakan mustache tag.

Kesimpulan

Dari beberapa aklternatif solusi di atas, silahkan pilih dan gunakan solusi mana yang paling sesuai dengan kebutuhan Anda. Untuk saya pribadi, solusi yang paling cocok dan saya gunakan sampai saat ini adalah yang menggunakan v-cloak

Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber :
https://vuejs.org/v2/api/#Directives

VS Code secara default sebenarnya sudah memiliki fitur yang sangat lengkap dan siap digunakan untuk mengembangkan aplikasi, baik web maupun platform yang lain. Akan tetapi, setiap orang memiliki gaya dan kebiasaan tersendiri sehingga kadang-kadang semua itu belum cukup.

Maka hadirlah extension-extension yang spesifik untuk memenuhi kebutuhan tersebut. Mulai dari hanya sekedar untuk memperindah tampilan, menyederhanakan hal-hal repetitif sampai dengan spesifik untuk framework tertentu.

Dan untuk para pengembang aplikasi web, maka berikut ini adalah beberapa extension pilihan VS Code untuk para web atau frontend programmer, yang dapat anda pertimbangkan untuk digunakan karena dapat mempermudah "hidup" anda.

1. ESLint

Setiap orang tentu punya style sendiri-sendiri dalam coding, dan siapa sangka hal ini dapat menjadi masalah besar pada saat mereka harus bekerjasama dalam 1 tim. Dengan ESLint, maka semua anggota tim harus mengikuti standar dalam hal ini Javascript. Mulai dari cara penulisan sampai dengan algoritma tertentu. Intinya ESLint "memaksa" anda untuk dapat membuat kode yang lebih baik dan konsisten.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

2. eslint-disable-snippets

Dalam kondisi tertentu, mungkin anda ingin menonaktifkan eslint tetapi hanya khusus baris tertentu saja. Maka eslint-disable-snippets akan mempermudah anda dalam menuliskan syntax disable eslint yang anda inginkan.

https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets

3. VS Color Picker

Mengingat lalu menuliskan kode warna untuk css atau yang sejenis bukanlah pekerjaan yang benar-benar mudah. VS Color Picker akan mempermudah anda untuk mengubah kode warna hanya dengan memilih dan klik.

https://marketplace.visualstudio.com/items?itemName=lihui.vs-color-picker

4. Live Server

Jika anda mengembangkan webapp dengan menggunakan framework seperti vue atau angular atau react, maka mungkin ekstensi ini tidak anda butuhkan, karena sudah termasuk di dalam setting framework tersebut. Tetapi jika anda membuat web statik atau sejenisnya, maka Live Server bisa sangat membantu, karena menyederhanakan proses testing anda tanpa mengharuskan anda untuk menginstall web server sendiri.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

5. Path Intellisense

Adalah sebuah ekstensi yang akan memunculkan autocomplete dari file-file yang ada di dalam folder project anda sehingga akan mempermudah anda untuk menuliskan path file.

6. File Utils

File utils adalah ekstensi untuk mempermudah user dalam manipulasi file. Mulai dari move, duplicate, rename dan lain-lain. Berdasarkan pengalaman, duplicate adalah salah satu fungsi dari file utils yang paling banyak digunakan.

7. Auto Rename Tag

Ekstensi ini akan mempermudah user dalam me-rename pasangan tag baik di html maupun xml. Jika selama ini anda pada waktu mengubah tag harus mengubah tag buka dan tutup secara manual, maka dengan ekstensi ini anda cukup mengubah salah satu tag nya saja.

8. JavaScript (ES6) code snippets

Code snippets akan mempermudah dan mempercepat user dalam menulis kode javascript atau typescript dalam syntax ES6. Selain itu, code snippets ini juga support html dan vue.

9. REST Client

Ekstensi ini memungkinkan user untuk melakukan tes terhadap RestAPI langsung di dalam VS Code. Jika selama ini anda melakukan testing RestAPI dengan menggunakan Postman, maka kini anda dapat langsung melakukannya dari dalam VS Code. Mulai dari methods GET biasa, sampai dengan UPDATE atau PUT atau DELETE dengan tambahan header token misalnya.

10. Settings Sync

Ekstensi yang satu ini tentu tidak hanya untuk para pengembang Web, melainkan untuk semua pengguna VS Code. Ekstensi ini memungkinkan user untuk menyimpan dan merestore semua setting dan ekstensi dari VS Code. Dengan ekstensi ini, maka user dapat berpindah-pindah PC atau Notebook lalu menginstall ulang VS Code tanpa perlu lagi repot-repot men-setting ulang dan menginstall ulang ekstensi mereka. Cukup install 1 ekstensi ini lalu restore. Ekstensi ini secara default menggunakan akun github untuk melakukan backup dan restore.

Tentu saja daftar ekstensi di atas tidak selalu sesuai dengan kebutuhan anda, oleh karena itu, jika anda merasa ada yang kurang dari daftar ekstensi di atas, jangan sungkan untuk menuliskannya pada kolom komentar.

Sekian, semoga yang sedikit ini bermanfaat.

Jika anda menggunakan Vue dan Vuetify, maka VDialog/v-dialog mungkin adalah komponen yang selalu atau sering anda gunakan. Cara standar untuk menggunakan v-dialog adalah dengan menempatkannya menjadi satu pada halaman yang membutuhkan, lalu men-show-hide dialog dengan menggunakan v-model.

Cara seperti ini sebenarnya dapat lebih disederhanakan lagi, yaitu dengan memisahkan dialog tersebut menjadi komponen terpisah dan memanggilnya hanya dengan fungsi tertentu, misalkan open() yang mengembalikan Promise.

Dengan cara di atas, maka Dialog anda akan menjadi lebih terstruktur, modular dan lebih sederhana dikarenakan Dialog tersebut dapat di-import di semua tempat dan lebih mudah karena hanya perlu menunggu respon dari Promise, apakah resolve atau reject.  Tidak perlu bingung lagi tombol apakah yang ditekan user, apakah OK atau SAVE atau CANCEL atau yang lain, melainkan cukup hanya melihat data yang dikembalikan jika resolve atau reject.

Berikut ini adalah contoh bagaimana cara untuk menggunakan dan menyederhanakan dialog agar menjadi promise-based komponen.

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.

Kode:

<template>
  <v-dialog v-model="dialog" width="600">
    <v-card>
      <v-card-title class="headline grey lighten-2" primary-title>
This is My Dialog
      </v-card-title> 
      <v-card-text>
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-btn color="default">Batal</v-btn>
        <v-spacer></v-spacer>
        <v-btn dark color="green">Ok</v-btn>
        <v-btn dark color="blue">No</v-btn>
        <v-btn dark color="purple">Ya</v-btn>
        <v-btn dark color="red">Tidak</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
 
<script>
export default {
  data: () => ({
    dialog: false,
  }),
  methods: {
  }
};
</script>

Komponen MDialog di atas akan kita buat agar dapat dipanggil hanya dengan 1 method/function saja. Misalkan method/function tersebut bernama open. Method open ini akan mengembalikan Promise dimana promise tersebut akan di-resolve jika user menekan tombol Ok, No, Ya dan Tidak dengan return berupa String yang sesuai dengan nama tombol, dan akan di-reject jika user menekan tombol Batal.

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.

<script>
export default {
  data: () => ({
    dialog: false,
    resolve : null,
    reject : null,
  })
};
</script>

Setelah itu 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.

<script>
export default {
  data: () => ({
    dialog: false,
    resolve : null,
    reject : null,
  }),
 
  methods:{
    open(){
      return new Promise((resolve, reject)=>{
        this.resolve = resolve
        this.reject = reject
 
        this.dialog = true
      })
    }
  }
};
</script>

Yang 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);

Pada kode di atas, pada saat meng-inisialisasi object Promise, function resolve kita simpan ke dalam variable/data resolve dan function reject juga kita simpan ke dalam variable/data reject. Perhatikan juga bahwa methods open akan langsung mengembalikan (return) Promise tersebut.

Jika anda masih bingung dengan Promise, maka sebaiknya anda pelajari lebih lanjut tentang Promise, salah satunya dari link ini : developer.mozilla.org Promise.

---

Baca juga :
Cara install dan integrasi GrapesJS dengan Vue 2

---

Selanjutnya kita buat 2 buah method untuk menutup dialog sebagai resolve dan sebagai reject, misalkan kita beri nama accept dan cancel. Masing-masing methods tersebut menerima 1 argumen yang akan dikembalikan dalam Promise. Tujuan dari methods accept ini adalah menutup dialog dan memanggil function resolve sehingga Promise akan masuk ke then. Dan tujuan dari cancel adalah untuk menutup dialog dan memanggil function reject sehingga Promise akan masuk ke catch.

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.

<v-card-actions>
   <v-btn @click="cancel('batal')" color="default">Batal</v-btn>
   <v-spacer></v-spacer>
   <v-btn @click="accept('Ok')" dark color="green">Ok</v-btn>
   <v-btn @click="accept('No')" dark color="blue">No</v-btn>
   <v-btn @click="accept('Ya')" dark color="purple">Ya</v-btn>
   <v-btn @click="accept('Tidak')" dark color="red">Tidak</v-btn>
</v-card-actions>

Sampai di sini maka MDialog kita sudah selesai dan siap untuk digunakan.

3. Menggunakan komponen MDialog

Setelah komponen MDialog selesai, maka kini saatnya untuk menggunakan komponen tersebut. Pada contoh kali ini, komponen MDialog tersebut akan saya gunakan pada halaman utama dari aplikasi saya, yaitu pada App.vue (Ini hanya contoh dan tentu saja anda dapat menggunakan komponen MDialog anda di sembarang halaman).

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

Kode :

<template>
  <v-app>
    <v-content>
      <v-container fill-height>
        <v-layout column fill-height align-center justify-center>
          <div class="body-2">Hasil dialog : {{hasil || '-'}}</div>
          <div>
            <v-btn color="primary">Open Dialog</v-btn>
          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>
 
<script>
export default {
  name: "App",
  components: {},
  data: () => ({
    hasil: ""
  }),
  methods: {}
};
</script>

Yang akan kita lakukan adalah, 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.

<script>
import MDialog from "./components/MDialog.vue";
export default {
  name: "App",
  components: {
    MDialog
  },
  data: () => ({
    hasil: ""
  }),
  methods: {}
};
</script>

Pastikan anda tidak lupa untuk menambahkan MDialog ke dalam components.

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.

<template>
  <v-app>
    <v-content>
    . . .
    </v-content>
 
    <MDialog ref="dlg"/>
 
  </v-app>
</template>

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.

<template>
  . . .
  <v-btn @click="openDialog" color="primary">Open Dialog</v-btn>
  . . .
</template>
  . . .
  methods: {
    openDialog() {
      this.$refs.dlg
        .open()
        .then(res => {
          this.hasil = res;
        })
        .catch(res => {
          this.hasil = res;
        });
   }
}

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.

Selesai.

Mudah-mudahan penjelasan ini tidak membingungkan dan anda dapat mengikuti setiap langkahnya serta dapat memahami dan menggunakan cara ini untuk keperluan anda. Jika ada yang kurang jelas atau ada informasi yang salah, jangan ragu-ragu untuk menuliskannya di dalam komentar.

Sekian, selamat mencoba dan semoga yang sedikit ini bermanfaat.

Catatan :
Penggunaan ref menjadi suatu keharusan jika anda menggunakan cara ini. Oleh karena itu anda harus mengetahui batasan dari penggunaan ref ini. Salah satunya adalah, ref menjadi tidak berfungsi jika ref berada di dalam kalang v-if. Setidaknya sampai dengan tulisan ini ditulis.

Hasil akhir dan kode lengkap.