By webfansplz @webfansplz
For this challenge, we're going to implement an active-style-directive. Lets go 👇:
<script setup lang='ts'>
import { ref } from "vue"
/**
* Implement the custom directive
* Make sure the list item text color changes to red when the `toggleTab` is toggled
*
*/
const VActiveStyle = {
}
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>
