Tentang Dynamic Component Pada Vue Js Part 1

Masih tentang sistem component pada Vue Js. Kali ini kita akan belajar tentang dynamic component. Ide simplenya kita punya beberapa component dimana kita bisa mengubah component mana yang akan diaktifkan. Jadi istilahnya kita buat beberapa halaman dan sangat cocok bila teman teman ingin membuat SPA (Single Page Application) atau aplikasi satu halaman. Untuk memulainya yang pertama anggap saja kita punya dua halaman yakni ada halaman home dan halaman posts. Tentu kita akan buat component untuk kedua halaman tersebut yang isi componentnya atau halamannya akan berbeda beda. Saya akan daftarkan home sebagai Vue Component lalu untuk isi templatenya kita berikan id home-template seperti berikut

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-1

Dan selanjutnya yang kedua saya akan buat untuk component berikutnya yaitu posts sebagai nama Vue Componentnya seperti ini

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-2

Karena component posts ini punya data postsnya maka dari itu akan buat object data yang datanya dalam bentuk function return

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-3

Kita akan mereturn hasil data array postsnya yang kita pisahkan dengan koma untuk nilai satu dengan nilai lainnya sebagai berikut 

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-4

Nah sekarang kita sudah punya beberapa posts yang kita simpan didalam array sebagai component posts-templatenya. Sekarang tugas berikutnya yang kita lakukan adalah menuliskan di HTML-nya yakni tag <component> sebagai berikut

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-5

Yang memiliki directive v-bind is dengan nilai currentView. currentView ini adalah data atau property yang akan kita definisikan sebagai data didalam Object Vue-nya yang nilainya sendiri adalah nilai default component yang aktif

Tentang-Dynamic-Component-Pada-Vue-Js-Part1-29-04-2017-6

Kita tulis sesuai dengan nama componentnya yakni home. Artinya secara otomatis sistem component yang aktif pertama kali di jalankan adalah halaman Home. Tentu tugas kita selanjutnya akan kita lanjutkan pada bagian artikelnya berikutnya. Semoga jelas dan Terima kasih

29 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat