Latihan 1: Custom Directives — Vue

Latihan 1 dari materi Custom Directives di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya objek directive vFocus yang masih kosong, dan child Pencarian dengan opsi directives: { focus: vFocus } dan template <input id="auto-focus" placeholder="Cari menu" />. Di editor, directive dipasang lewat opsi directives di komponen objek, karena trik nama vFocus cuma dikenali build tool.

Di vFocus, tulis hook mounted(el) { el.focus() }.
Di template Pencarian, tambahkan v-focus di <input>.
Di bawah garis ---template---, ganti komentar TODO dengan <component :is="Pencarian" />.

Yang dicek:

Ada #auto-focus, dan fokus browser benar-benar ada di sana begitu halamannya tampil.
vFocus punya hook mounted yang memanggil .focus().
<input> di template Pencarian memakai v-focus.

Hint

Directive adalah objek hook. Hook mounted jalan sekali setelah elemennya terpasang, jadi di situ elemennya bisa diberi fokus.
Isi vFocus dengan mounted(el), lalu panggil focus() pada el. Directive yang didaftarkan sebagai focus dipakai dengan nama v-focus di elemen template Pencarian.
const vFocus = { mounted(el) { el.focus() } } lalu template Pencarian: <input id="auto-focus" v-focus placeholder="Cari menu" />, dan di bawah garis: <component :is="Pencarian" />

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Custom Directives — Vue

Hint

Memperbarui Aplikasi