Dynamically binding Tailwind classes to v-for elements
i have this kind of array content rendered in the template
but it only applies to the first iterated array item:
but it only applies to the first iterated array item:
[{
...
tw: {
bg: 'bg-green-500/10',
num: 'text-green-500 dark:text-green-400',
},
...
}]<template v-for="i in data">
<dl :class="i.tw.bg">
<dt>{{ i.tw.bg }}</dt>
<dd :class="i.tw.num">{{ i.value }}</dd>
</dl>
</template>