Artikel ini membahas cara menghilangkan element slot sebelum menampilkan Vue. Kita juga akan membahas bagaimana menggunakan direktif v-cloak untuk menghindari "flash of un-compiled templates".

Ketika kita menggunakan template Vue, kita seringkali ingin menampilkan elemen-elemen tertentu hanya setelah Vue telah selesai meng-render kontennya. Namun, kadang-kadang kita juga ingin menampilkan elemen-elemen tersebut sebelum Vue selesai meng-render kontennya.

Misalnya, dalam contoh di atas, kita memiliki komponen Vue yang memiliki slot untuk memasukkan content dari parent component. Kita ingin agar elemen-elemen tersebut tidak dipaparkan ke pengguna sebelum Vue selesai meng-render kontennya.

Cara termudah untuk menghilangkan elemen-elemen tersebut adalah dengan menggunakan direktif v-show atau v-if. Direktif ini memungkinkan kita untuk mengontrol apakah elemen-elemen tersebut dipaparkan ke pengguna atau tidak.

Dalam contoh di atas, kita dapat menambahkan direktif v-show pada div yang berisi slot. Kita dapat membuat variabel showForm dan menggunakan direktif v-show untuk mengonfigurasi apakah div tersebut dipaparkan ke pengguna atau tidak.

<div class="card mb-4" v-show="showForm">
 <!-- content here -->
</div>

Dengan cara ini, elemen-elemen yang ada dalam slot hanya akan dipaparkan ke pengguna setelah Vue selesai meng-render kontennya.

Namun, jika kita ingin membuat elemen-elemen tersebut tidak dipaparkan ke pengguna sebelum Vue selesai meng-render kontennya, kita dapat menggunakan direktif v-cloak. Direktif ini memungkinkan kita untuk mengonfigurasi apakah elemen-elemen tersebut dipaparkan ke pengguna atau tidak.

<div class="card mb-4" v-cloak>
 <!-- content here -->
</div>

Dalam contoh di atas, kita dapat menambahkan direktif v-cloak pada div yang berisi slot. Direktif ini akan menghilangkan elemen-elemen tersebut sebelum Vue selesai meng-render kontennya.

Namun, untuk menggunakan direktif v-cloak, kita harus menambahkan CSS rules untuk mengonfigurasi apakah elemen-elemen tersebut dipaparkan ke pengguna atau tidak.

[v-cloak] {
 display: none;
}

Dalam contoh di atas, kita dapat menambahkan CSS rules untuk menghilangkan elemen-elemen yang berisi direktif v-cloak. Dengan cara ini, elemen-elemen tersebut hanya akan dipaparkan ke pengguna setelah Vue selesai meng-render kontennya.

Dalam kesimpulan, kita dapat menggunakan direktif v-show atau v-if untuk menghilangkan elemen-elemen slot sebelum menampilkan Vue. Namun, jika kita ingin membuat elemen-elemen tersebut tidak dipaparkan ke pengguna sebelum Vue selesai meng-render kontennya, kita dapat menggunakan direktif v-cloak dan menambahkan CSS rules untuk mengonfigurasi apakah elemen-elemen tersebut dipaparkan ke pengguna atau tidak.