[Vuejs]-How to set active class in vue 3 on active item when clicked

by

-1👍

✅

I used selectedItem.value in setup.

This is because in the setup function, selectedItem has a type of Ref, where in the template the internal value is directly available that’s why we use there as selectedItem simply.

Also i modified :class code a bit which makes it work.

<template>
   <ul class="items">
        <li
          class="item"
          v-for="(item, index) in items"
          :key="index"
          @click="selectItem(index)"
          :class="{ active: index == selectedItem }"
        >
          {{ item }}
        </li>
      </ul>
</template>
<script lang="ts">
import { defineComponent,ref } from "vue"
export default defineComponent({
  name: "Test",
  props: {    
    id: Number,
    item: Object,
  },
  setup(props) {
    const selectedItem = ref(0)
    let isActive = false
    
    const items = ["A", "B", "C", "D"]
    const selectItem = (i: number) => {
  selectedItem.value = i
  items.forEach((item, index) => {
    return (isActive = item == items[index])
  })
  return selectedItem
 
}
    
    return {
      items,
      selectedItem,
      selectItem,
      isActive,
    }
  },
})
</script>

Leave a comment