Apply CSS conditionally in a loop - VueJS

Question

I have a JSON list of items that I import in my vue component, I loop though that file in order to show them. Each item belong to a specific 'group' :

See IMG

E.g. :

{
"type": "Simple list",
"title": "Simple list",
"id": 1,
"group": "list-component",
"properties": "lorem lipsum"
},

I would like to apply a CSS 'border-top-color' to each item according to its group.

I was trying to apply the conditions when mouted(){} but I'm not sure if I'm doing it right. Here's my atempt :

The template (I'm using VueDraggable, don't mind it) :

          <div class="item drag" :key="element" :style="[{ 'border-top-color': 'brdrTpClr' }]">
            {{ element.title }}
            <div class="addico" :key="index">
              <i class="fas fa-add"@click="$emit('pushNewElt', element.id)"></i>
            </div>
          </div>

The script :

data() {
    return {
      dragItems: dragItemsList,
      brdrTpClr: "",
    };
  },
  mounted() {
    for (let i = 0; i <= 15; i++) {
      if (this.dragItems[i].group == "list-component") {
         // I'm not sure how to do it
        // the color I want to apply : #00A3A1b
      } else if (this.dragItems[i].group == "location-media-component") {
        // #005EB8
      } else if (this.dragItems[i].group == "container-component") {
        // #0091DA
      } else if (this.dragItems[i].group == "UI-component") {
        // #6D2077
      } else if (this.dragItems[i].group == "reader-scanner-component") {
        // #470A68
      }
    }
  },

I'm using i<=15 instead of i<=this.dragItems.length because of a bug, don't mind it too.

tao · Accepted Answer · 2022-05-28 00:11:44Z

1

Probably the most efficient (performance wise) and the most readable solution would be to declare a constant colorMap, outside the component, and then return the correct value or a fallback, using a method:

<script>
const colorMap = {
  "list-component": '#00A3A1',
  "location-media-component": '#005EB8',
  "container-component": '#0091DA',
  "UI-component": '#6D2077',
  "reader-scanner-component": '#470A68'
}
export default { 
  //...
  methods: {
    borderColor(group) {
      return colorMap[group] || '#000'
    }
  }
}
</script>
<template>
  ...
  <div :style="{borderColor: borderColor(element.group)}">
    content...
  </div>
</template>

As a general rule, you want to take anything more complicated than a simple ternary outside of the template and provide it via either computed or methods.

Side note: the above method can also be written as computed:

   computed: {
     borderColor: group => colorMap[group] || '#000'
   }

If you find yourself needing the colorMap in more than one component, export it from a constants.(js|ts) file and import everywhere needed. I typically name that file helpers, as it typically also contains static functions or maps (anything I reuse across multiple components/modules).

Important: you're currently passing an array to :style. You should be passing an object.

edited May 28, 2022 at 0:11

answered May 26, 2022 at 16:22

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

realmhaven Over a year ago

Thanks! I had no idea how to do that, your help was precious!

Aragan · Accepted Answer · 2022-05-26 16:39:52Z

0

I would make a method called getBorderColor(item) which returns the colour based on the group, and then dynamically bind it using Vue.

<div 
  class="item drag" 
  :style="[{ 'border-top-color': getBorderColor(element) }]"
>
  {{ element.title }}
  // Add icon etc.
</div>

getBorderColor(element) {
  // Can use a switch statement, but here's a simple ternary if/else as an example
  return element.group === "list-component" ? `#00A3A1b`
  : element.group === "location-media-component" ? `#005EB8`
  : element.group === "container-component" ? `#0091DA`
  : element.group === "UI-component" ? `#6D2077`
  : element.group === "reader-scanner-component" ? `#470A68`
  : `#000000`; // Default colour
}

or for a cleaner option you can have an object with your groups as keys and colours as values in data e.g.

return {
  dragItems: dragItemsList,
  brdrTpClr: "",
  colors: {
    "list-component": `#00A3A1b`,
    "location-media-component": `#005EB8`,
    // etc.
  },
};

getBorderColor(element) {
  return this.colors[element.group] || `#000`;
}

edited May 26, 2022 at 16:39

answered May 26, 2022 at 16:07

Aragan

913 bronze badges

1 Comment

tao Over a year ago

If you place the colors in data, you're making them reactive(e.g: Vue wraps them in functions which are triggered whenever their values change). That's completely unnecessary, since the colors are not changing so it would make a lot more sense to place them outside the component. The other benefit is that, if you have a thousand instances of this component, the colors const gets created only once (if placed outside), whereas in your suggestion it gets created for each instance (and each of them is made reactive). In web, performance matters.

Collectives™ on Stack Overflow

Apply CSS conditionally in a loop - VueJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related