Using Vue.js to dynamically assign CSS classes based on variables

Question

Using Vue.js to dynamically assign CSS classes based on variables

Is it possible to achieve this with a dynamic class like the following?

<div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' ">

I have been struggling to find the correct syntax for this. Thank you for any answers.

This is an example of what I am trying to accomplish. I need the result outofstock.item_1, outofstock.item_2, and outofstock.item_3 in the :class attribute.

<template>
<ul>
    <li v-for="item in items">
        <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' ">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
    export default {
        data () {
            return {
                items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'],
                outofstock: {item_1: false, item_2: true, item_3: false}
            }
        }
    }
</script>

css vue.js variables

Answer 1

Answer №1

This code snippet demonstrates how to achieve a specific styling effect in Vue Playground without the need to call a method:

Check out the Vue Playground for more information.

<template>
  <ul>
    <li v-for="item in items">
      <div :class="outofstock['item_' + item.id] ? 'bg-green-500' : 'bg-red-500' ">
        {{ item.name }}
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        items: [{ id: 1, name: 'monitor'}, { id: 2, name: 'printer'}, { id: 3, name: 'scanner'}],
        outofstock: {
          item_1: false,
          item_2: true,
          item_3: false
        }
      }
    }
  }
</script>

<style>
  .bg-green-500 {
    background-color: green;
  }
  .bg-red-500 {
    background-color: red
  }
</style>

Answer 2

This code snippet demonstrates how to achieve a specific styling effect in Vue Playground without the need to call a method:

Check out the Vue Playground for more information.

<template>
  <ul>
    <li v-for="item in items">
      <div :class="outofstock['item_' + item.id] ? 'bg-green-500' : 'bg-red-500' ">
        {{ item.name }}
      </div>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        items: [{ id: 1, name: 'monitor'}, { id: 2, name: 'printer'}, { id: 3, name: 'scanner'}],
        outofstock: {
          item_1: false,
          item_2: true,
          item_3: false
        }
      }
    }
  }
</script>

<style>
  .bg-green-500 {
    background-color: green;
  }
  .bg-red-500 {
    background-color: red
  }
</style>

Answer 3

Answer №2

Create a computed property that generates a function accepting the item ID as an argument, then utilize string literals to display the appropriate class:

<template>
<ul>
    <li v-for="item in items">
        <div :class="`${fetchItemStatus(item.id) ? 'bg-green-500' : 'bg-red-500' }`">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
    export default {
        data () {
            return {
                items: [{id: 1, name: 'laptop'}, {id: 2, name: 'keyboard'},{id: 3, name: 'mouse'],
                stockAvailability: {item_1: false, item_2: true, item_3: false}
            }
        },
   computed:{
       fetchItemStatus(){
         return (id)=>this.stockAvailability[`item_${id}`];
       }
     }
    }
</script>

Answer 4

Create a computed property that generates a function accepting the item ID as an argument, then utilize string literals to display the appropriate class:

<template>
<ul>
    <li v-for="item in items">
        <div :class="`${fetchItemStatus(item.id) ? 'bg-green-500' : 'bg-red-500' }`">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
    export default {
        data () {
            return {
                items: [{id: 1, name: 'laptop'}, {id: 2, name: 'keyboard'},{id: 3, name: 'mouse'],
                stockAvailability: {item_1: false, item_2: true, item_3: false}
            }
        },
   computed:{
       fetchItemStatus(){
         return (id)=>this.stockAvailability[`item_${id}`];
       }
     }
    }
</script>

Answer 5

Answer №3

If you want to display items with different styles based on their availability, you can create a method to return the correct value:

const app = Vue.createApp({
  data() {
    return {
      items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'}],
      outofstock: {item_1: false, item_2: true, item_3: false}
    };
  },
  methods: {
    getOutofstock(id) {
      return this.outofstock[id]
    }
  }
})
app.mount('#demo')

.bg-green-500 {
  color: green;
}
.bg-red-500 {
  color: red;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
    <li v-for="item in items">
        <div :class="getOutofstock('item_'+item.id) ? 'bg-green-500' : 'bg-red-500' ">
            {{ item.name }}
        </div>
    </li>
</ul>
</div>

Answer 6

If you want to display items with different styles based on their availability, you can create a method to return the correct value:

const app = Vue.createApp({
  data() {
    return {
      items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'}],
      outofstock: {item_1: false, item_2: true, item_3: false}
    };
  },
  methods: {
    getOutofstock(id) {
      return this.outofstock[id]
    }
  }
})
app.mount('#demo')

.bg-green-500 {
  color: green;
}
.bg-red-500 {
  color: red;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
    <li v-for="item in items">
        <div :class="getOutofstock('item_'+item.id) ? 'bg-green-500' : 'bg-red-500' ">
            {{ item.name }}
        </div>
    </li>
</ul>
</div>

Using Vue.js to dynamically assign CSS classes based on variables

Answer №1

Answer №2

Answer №3

Similar questions

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

What is the process for adding a box shadow beneath my header?

What is causing the slider image to be the only element that is not adapting to different screen sizes?

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

Managing input changes in a loop using Vue.js

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Position a Bootstrap 3 division within a central division for ultimate centering

VueJS failing to pass parent data to child component

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Enhancing the Appearance of Legends in Chartjs

Is there a way I can turn off the dragging functionality in my situation?

What is the best way to center my text vertically within a Bootstrap 5 "col" class division?

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I prefer not to receive the parent's opacity settings when styling a child element in CSS

Create a basic Vue.js page using Flask as a single server

Ways to create unique hover effects for images in a filter gallery

Bootstrap slider aligned to the right side

The button's unclickability is due to the zIndex being set to -1

Guidelines for pinpointing local directories