How to implement dynamic color for classes in a v-for loop using Vue.js?

Question

How to implement dynamic color for classes in a v-for loop using Vue.js?

Struggling with a seemingly simple issue that may be easy for VueJS pros.

In my data, I have JSON objects with an attribute that can take values of 10, 20, 30, or 40. Depending on this value, I want to change the color of a v-btn.

I've attempted multiple methods but keep running into errors.

Here's one attempt:

<v-btn
    class="flex-column pa-6" 
    :class="getColor(item.type)"
>

where the getColor method is defined as follows:

getColor: function(type)
        {
          return this.color[type]
        }

Another approach I tried was:

<v-btn
    class="flex-column pa-6" 
    v-bind:class= "[item.type == '10' ?  color['10'] : color['20'] ]"
>

This works, however, it always defaults to color['20']. Why isn't my condition working correctly?

The v-for loop in question looks like this:

<v-card
        v-for="incident in incidents"
        :key="incident"
        class="mx-auto" 
      >

javascript vue.js class vuejs2 colors

Answer 1

Answer №1

Here is a possible solution based on the information you provided:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      incidents: [{type: 10, name: 'aaa'}, {type: 40, name: 'bbb'}, {type: 30, name: 'ccc'}],
      colors: [{id: 10, color: 'purple'}, {id: 20, color: 'blue'}, {id: 30, color: 'green'}, {id: 40, color: 'red'}]
    }
  },
  methods: {
    getColor(id) {
      return this.colors.find(c => c.id === id)?.color || ''
    }
  }
})

.blue {
  background-color: blue;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88e87869ca8dec690">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3c3f2f3e232c330a786432">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card
          v-for="(incident, i) in incidents"
          :key="i"
          class="mx-auto" 
        >
          <v-btn
            class="flex-column pa-6" 
            :class= "getColor(incident.type)"
          >
            {{ incident.name }}
          </v-btn>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196f6c7c592b3761">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32444757465b544b72001c4a">[email protected]</a>/dist/vuetify.js"></script>

Answer 2

Here is a possible solution based on the information you provided:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      incidents: [{type: 10, name: 'aaa'}, {type: 40, name: 'bbb'}, {type: 30, name: 'ccc'}],
      colors: [{id: 10, color: 'purple'}, {id: 20, color: 'blue'}, {id: 30, color: 'green'}, {id: 40, color: 'red'}]
    }
  },
  methods: {
    getColor(id) {
      return this.colors.find(c => c.id === id)?.color || ''
    }
  }
})

.blue {
  background-color: blue;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88e87869ca8dec690">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3c3f2f3e232c330a786432">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card
          v-for="(incident, i) in incidents"
          :key="i"
          class="mx-auto" 
        >
          <v-btn
            class="flex-column pa-6" 
            :class= "getColor(incident.type)"
          >
            {{ incident.name }}
          </v-btn>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196f6c7c592b3761">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32444757465b544b72001c4a">[email protected]</a>/dist/vuetify.js"></script>

Answer 3

Answer №2

Great job with your code! One thing to note is that you should consider using the !important declaration in the styles to successfully override the default style of v-btn.

Here's a Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{type: 10}, {type: 40}, {type: 30}],
      color: {
        10: 'purple',
        40: 'blue',
        30: 'green'
      }
    }
  },
  methods: {
    getColor(type) {
      return this.color[type]
    }
  }
})

.blue {
  background-color: blue !important;
}
.purple {
  background-color: purple !important;
}
.green {
  background-color: green !important;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fffcecfde0eff0c9bba7f1">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cfaf9e9ccbea2f4">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5838090819c938cb5c7db8d">[email protected]</a>/dist/vuetify.js"></script>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <v-btn v-bind:class="getColor(item.type)">
     {{ getColor(item.type) }}
    </v-btn>
    <br><br>
  </div>
</div>

Answer 4

Great job with your code! One thing to note is that you should consider using the !important declaration in the styles to successfully override the default style of v-btn.

Here's a Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{type: 10}, {type: 40}, {type: 30}],
      color: {
        10: 'purple',
        40: 'blue',
        30: 'green'
      }
    }
  },
  methods: {
    getColor(type) {
      return this.color[type]
    }
  }
})

.blue {
  background-color: blue !important;
}
.purple {
  background-color: purple !important;
}
.green {
  background-color: green !important;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fffcecfde0eff0c9bba7f1">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cfaf9e9ccbea2f4">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5838090819c938cb5c7db8d">[email protected]</a>/dist/vuetify.js"></script>
<div id="app">
  <div v-for="(item, index) in items" :key="index">
    <v-btn v-bind:class="getColor(item.type)">
     {{ getColor(item.type) }}
    </v-btn>
    <br><br>
  </div>
</div>

How to implement dynamic color for classes in a v-for loop using Vue.js?

Answer №1

Answer №2

Similar questions

Switch a div to a computed location

Using jQuery to select a div element that has been dynamically loaded using ajax, or inserted into the DOM using the html()

Why is React's nested routing failing to render properly?

JSON API WebConnector for Tableau

Displaying Data in a Table

Single input results in array output

Add the AJAX response to the dropdown menu options

Determine if the object's value is present

What is the best way to show a pop-up model at the bottom of a webpage?

Selecting the first li element using JQuery selectors

"Using Angular's NgFor directive to efficiently organize and collapse data within

Increase the number of button groups when clicked

Error: Unable to instantiate a THREE.Scene object in Three.js due to TypeError

Using Vue.js to dynamically load a component from another component in JavaScript when the page is first loaded

A guide on showcasing nested arrays data in an Angular application

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

After removing an item from the array, React fails to display the updated render

Nuxt - Vue - Utilizing middleware on a layout in a few simple steps

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

JavaScript code to generate a UTF8 string from UTF codes