#MyNotes Make Active Menu When Clicked in Vue Js

Untuk membuat menu active secara dinamis seperti gambar diatas, pertama kita harus membuat active menu secara manual terlebih dahulu. Jika sudah bisa membuat seperti gambar diatas maka kita selanjutnya perlu membuat sebuah fungsi yaitu:

1) Buat hari diatas kedalam array yang mana nanti akan kita looping

...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    return {
      days
    }
}

2) Sekarang kita implement ke dalam navigationnya, kita looping array nya.

<div class="dashboard__nav_days">
 <span v-for="(dayData, i) in days" :key="i">
   <span class="dashboard__nav_days__item">{{ dayData }}</span>
 </span>
</div>

3) Jika sudah berhasil terlooping, selanjutnya buat default value untuk dikasi default active nya. Sekaligus kita buat ketika hari yang lain di click active nya ikut pindah

...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    const day  = ref<string>("selasa")
    return {
      days,
      day
    }
}

<div class="dashboard__nav_days">
 <span v-for="(dayData, i) in days" :key="i">
  <span v-if="day === dayData" class="dashboard__nav_days__item dashboard__nav_days__item--active">{{ dayData }}</span>
  <span v-else @click="day = dayData" class="dashboard__nav_days__item">{{ dayData }}</span>
 </span>
</div>

4) Nah sekarang buat Get value hari yang sedang active. Rencananya buat di kirim kepada API buat return data sesuai hari

import { ..., watch } from 'vue';
...
setup() {
    const days = ref<string[]>(["selasa","kamis","jumat","summary"])
    const day  = ref<string>("selasa")
    watch(day, (day, prevDay) => {
      // console.log(day, prevDay)
    })
    return {
      days,
      day
    }
}

Thanks 🙏