Tentang Dynamic Component Pada Vue Js Part 2

Hai semuanya pada bagian ini kita akan lanjutkan tugas kita yaitu Tentang Dynamic Component pada Vue Js. Jadi sekali lagi bila kita menggunakan tag <component> dengan attribute is maka dia akan mencari nama component mana yang akan diaktifkan tapi karena idenya kita ingin membuat sistemya dinamis atau kita bisa klik linknya. Jadi setiap kita klik link tertentu maka akan merubah nama component tersebut. Jadi tugas untuk artikel bagian kedua tentang dynamic component ini yaitu kita akan memulai membuat isi template untuk masing-masing halamannya yakni kita membuatnya dengan menggunakan tag <template> dengan menentukan nama id-nya sebagai berikut

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-1

id home-template untuk isi component homenya sedangkan id posts-template untuk isi component dari postsnya. 

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-7

Tentu isi template untuk component posts agak sedikit berbeda karena datanya kita harus melakukan loop atau perulangan yaitu dengan menggunakan directive v-for seperti berikut

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-3

Dengan menentukan namabaru in lalu nama array postsnya dan kita cetak seperti biasa sesuai dengan namabarunya sebagai berikut

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-4

Lalu jangan lupa tugas terakhir kita adalah membuat sebuah link menunya untuk bisa kita klik yakni ada link untuk Home dan Postsnya dan dibagian tag <a> kita berikan event v-on:click dengan mendefinisikan property currentViewnya diubah menjadi template home sebagai berikut

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-5

Dan sebaliknya bila kita klik bagian postsnya maka currentViewnya diubah menjadi sistem component posts

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-6

Bila kita reload halamannya pastikan semua sudah berfungsi dan berjalan dengan baik dan bila teman teman klik menu postsnya maka akan tampil data posts-nya begitupun untuk link menu untuk Homenya. Jadi sangat simple teman teman bisa buat lebih dari dua tentunya untuk sistem componentsnya.

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-7

Satu lagi tambahan yaitu kita bisa lakukan bila teman teman tidak mau selalu merender ulang kita bisa memberikan attribute keep-alive dibagian tag <component>

tentang-dynamic-component-pada-vue-js-part-1-30-04-2017-8

Oke itu saja tambahannya. Jadi itu dia tentang dynamic component pada Vue Js untuk bagian yang kedua. Sampai jumpa pada artikel selanjutnya.

30 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