24 - v-active-style

[lxxorz]

// your answers
<script setup lang='ts'>

import { ref, computed, watch } from "vue"
/**
 * Implement the custom directive
 * Make sure the list item text color changes to red when the `toggleTab` is toggled
 *
*/
const emit = defineEmits(["toggleTab"])
const VActiveStyle = {
  mounted(el, binding) {
    const [style, isActive] = binding.value;
    const state = computed(() => isActive());
    const toggleStyle = (state) => {
      for(const attr of Object.keys(style)) {
        el.style[attr] = state.value ? style[attr] : "";
      }
    }
    watch(state, () => {
      toggleStyle(state);
    }, {immediate: true})

  },
}

const list = [1, 2, 3, 4, 5, 6, 7, 8]
const activeTab = ref(0)
function toggleTab(index: number) {
  console.log(index);
  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>