24 - v-active-style

[gcaraciolo]

<script setup lang='ts'>

import { ref, watchEffect } from "vue"

const VActiveStyle = {
  created(el, binding) {
    const [style, fn] = binding.value;
    watchEffect(() => {
      if (fn()) { // fn is () => activeTab === index. Since activeTab is reactive, watchEffect works.
        el.style.color = style.color
      } else {
        el.style.color = ''
      }
    })
  }
}

const list = [1, 2, 3, 4, 5, 6, 7, 8]
const activeTab = ref(0)
function toggleTab(index: number) {
  activeTab.value = index
}

</script>

<template>
  <ul>
    <li
      v-for="(item,index) in list"
      :key="index"
      v-active-style="[{'color':'red'},() => activeTab === index]"
      @click="toggleTab(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>