Post Detail

Menu active pada sebuah aplikasi sangatlah penting karena menu active bisa mencerminkan dimana kita berada saat ini ketika mengklick menu. Saya baru mengenal dunia frontend jadi sebelum memulai mohon maaf kalo ada kesalahan dalam penulian. Untuk outputnya seperti contoh di bawah ini.

Nah sample outputnya seperti itu, jadi gimana caranya ketika saya klick submenu realisasi anggaran maka menu transaksi nya menjadi aktif. 

Buat fungsi di App.vue dengan method seperti berikut ini

methods: {
            subIsActive(input) {
                const paths = Array.isArray(input) ? input : [input]
                return paths.some(path => {
                    return this.$route.path.indexOf(path) === 0 // current path starts with this path string
                })
            }

Setelah di buat panggil fungsi tersebut pada parent menu atau dalam contoh saya kali ini yaitu parent menunya "Transaksi" berikut cara memanggil fungsi tersebut.

Nah lalu gimana kalo submenu nya banyak itu kan hanya satu, karena datanya array bisa menggunakan syntak nya kalo lebih dari 1 submenu nya

subIsActive(['/products', '/cart'])

Demikianlah tutorial kali ini, semoga bermanfaat.