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

The loading feature of jQuery UI Autocomplete - .ui-autocomplete-loading is ingenious

How can I ensure that Div and its contents are only responsive to changes in width?

What do you do when you need to hide a table column that has a colspan

What is the best method to eliminate the 2px flaws on the right edge?

How to effectively use flexbox to resize child elements in a CSS layout

Get rid of the background shade in the area separating the menu items within a CSS menu

How should the directory be organized for the param with a prefix in Nuxt.js?

establishing irregular edges for the div container

Enhancing JEST testing efficiency using vue.js

Rendering Content Conditionally Using Vue and Prime Vue Component Library

Connecting a custom bootstrap stylesheet to WordPress

CSS for mobile devices not loading until the device is rotated

Flexbox can be incorporated with a slide down animation to create

Using asynchronous import statements in Vue allows for more efficient loading of components

Utilizing CSS to Display a Variety of Colors within a Text String

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Vue.js 3 with TypeScript is throwing an error: "Module 'xxxxxx' cannot be located, or its corresponding type declarations are missing."

Troubleshooting Vue computed property access issues

The anchor tag seems to be malfunctioning within the div container

Is it possible to view the CSS of a PDF file in print template mode using Chrome?