N
Nuxt•8mo ago
therin

Dynamically binding Tailwind classes to v-for elements

i have this kind of array content rendered in the template 
  [{
    ...
    tw: {
      bg: 'bg-green-500/10',
      num: 'text-green-500 dark:text-green-400',
    },
    ...
  }]
  [{
    ...
    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>
<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>
but it only applies to the first iterated array item:
No description
No description
1 Reply
therin
therinOP•8mo ago
i have nuxtui installed with mostly the default config it gave okay it probably needed a different approach, so i did this and made the respective child styles in the stylesheet: 
  [{
    ...
    tw: 'green-card',
    ...
  }]
  [{
    ...
    tw: 'green-card',
    ...
  }]
<dl :class="i.tw">
<dl :class="i.tw">

Did you find this page helpful?