CODEWITHSUNDEEP
nuxt.jstailwind-cssnuxt3.js
EsinYil
EsinYil

Reputation: 59

How to dynamically change class in Nuxt3 with Tailwind?

I'm very new to Nuxt3 and Tailwind, and I'm working on a section which dynamically renders 4 segments.

<section class="howItWorks">
 <div class="clientchoice__desc">
   <h4 class="mb-2">{{item.title}}</h4>
   <p class="mb-4">{{item.desc}}</p>
   <h2 class="mt-44 number">{{item.number}}</h2>
 </div>
</section>

The dynamically rendered data comes from here:

export default {
  data() {
    return {
     howItWorks: [
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '1'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '2'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '3'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '4'
        },
      ],
   }
 }
}

I would like to have different styling for the each of the numbers (1,2,3 and 4) that appear under the descriptions. Such as having different colors etc.

Is it possible? What would be the best way to have the css class change dynamically?

Thank you.

Upvotes: 2

Views: 5514

Answers (2)

sanicboi
sanicboi

Reputation: 56

You can use v-bind:class="" alongside class="". This means that you can create a variable and change it when you need to:

<!-- like this-->
<div class="p-8" :class="your_variable"></div>
<script setup>
//let your_variable = ref('');
//onMounted(()=>{your_variable.value = 'bg-blue-600'})
</script>

Upvotes: 0

nur_riyad
nur_riyad

Reputation: 1370

We can pass an object to :class (short for v-bind:class) to dynamically toggle classes

<div :class="{ active: isActive }"></div>

The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

isActive can be a computed property or even a method, as long as it's return a truthy value the active class will be set to the element. Learn other ways of dynamic class rendering from vue official doc

For your case, you can run a v-for loop on howItWorks array and for each item use a computed property or method to return a specific class to dynamiclly render based on the item. Below given one possible demo code of how can you dynamically add class among many ways. To see how this below code's outcome go to this vue playground link

<template>
<section class="howItWorks" v-for="(item,index) in howItWorks" :key="index">
 <div class="clientchoice__desc">
   <h4 class="mb-2">{{item.title}}</h4>
   <p class="mb-4">{{item.desc}}</p>
   <h2 class="mt-44 number" :class="setClass(item,index)">{{item.number}}</h2>
 </div>
</section>
</template>  
<script>
export default {
  data() {
    return {
     howItWorks: [
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '1'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '2'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '3'
        },
        {
          icon: '/svgs/line.png',
          title: 'Title',
          desc: 'Description here',
          number: '4'
        },
      ],
   }
 },
 methods:{
   setClass(item,index){
     if(item.number == "1") return "red";
     else if(item.number=="2") return "green";
     else if(item.number =="3") return "yellow";
     else return "blue";
   }
 }
}
</script>

<style>
  .red{
    color: red;
  }
  .green{
    color: green;
  }
  .yellow{
    color: yellow;
  }
  .blue{
    color:blue;
  }
  
</style>

Upvotes: 1

Related Questions