#MyNotes Vue Js에서 클릭하면 활성 메뉴 만들기

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

1) Buat hari diatas kedalam 배열 yang mana nanti akan kita 루핑

...
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) 터루핑이 아닌 경우에는 기본 활성 상태가 아닌 기본값을 선택하십시오. Sekaligus kita buat ketika hari yang lain di 클릭 활성 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 하리 양 세당 활성. Rencananya buat di kirim kepada API buat 반환 데이터 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
    }
}

감사합니다 🙏