How to add class from content of a variable in Vue.js

Question

I want to pass a variable to a component which should be added as a class to a div. However, Vue adds the name of the variable instead of the content.

So I pass the prop color which contains red.
What I want: <div class="red">2</div>
What I get: <div class="color">2</div>

I think this is a noob question, so sorry for that. Maybe there is a better way to do this.

Thanks for helping me out.

Here are my components:

<template>
    <div class="btn btn-outline-primary cell"
         :class="{color}"
         :id="id">
        {{ number }}
    </div>
</template>

<script>
    export default {
        name: "TileElement",
        props: ["id", "number", "color"]
    }
</script>

<style scoped>
    .green {
        color: green;
    }

    .red {
        color: red;
    }

    .yellow {
        color: yellow;
    }

    .cell {
        display: inline-block;
        float: left;
        margin: 0.1em;
        text-align: center;
        background-color: lightgray;
        width: 2.7em;
        height: 2.7em;
    }
</style>

Parent Component:

<template>
    <div class="row">
        <TileElement
                v-for="tile in tiles"
                v-bind:key="tile.id"
                v-bind:number="tile.number"
                v-bind:color="tile.color"
        ></TileElement>
    </div>
</template>

<script>
    import TileElement from './TileElement.vue';

    export default {
        name: "TileRow",
        components: {
            TileElement
        },
        data: function () {
            return {
                tiles: [
                    {id: 1, number: 1, color: "green"},
                    {id: 2, number: 2, color: "red"},
                    {id: 3, number: 3, color: "yellos"}
                ]
            }
        }
    }
</script>

Does this answer your question? Change background color in vue.js based on a class name — Nate
– Nate, Commented Jan 13, 2020 at 19:31

tony19 · Accepted Answer · 2022-07-15 01:50:41Z

18

If you just need to pass a class, without any conditions or other such stuff, then you can simple use array for one and any other number of classes:

<div :class="[color]"></div>

But that's not only you can do.

https://v2.vuejs.org/v2/guide/class-and-style.html

edited Jul 15, 2022 at 1:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 13, 2020 at 19:08

bonusrk

7275 silver badges13 bronze badges

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

Comments

blex · Accepted Answer · 2022-03-06 17:19:40Z

5

:class="color" will also work:

var vm = new Vue({
  el: '#app',
  data() {
    return {
      color: 'red'
    };
  }
});

.cell { width: 50px; height: 50px; }
.red { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <div class="cell" :class="color"></div>
</div>

edited Mar 6, 2022 at 17:19

answered Jan 13, 2020 at 19:10

blex

25.7k6 gold badges48 silver badges78 bronze badges

Comments

Justin Levine · Accepted Answer · 2020-01-13 19:08:12Z

4

Try dynamically importing the class name

:class="{[color]: true}"

answered Jan 13, 2020 at 19:08

Justin Levine

2852 silver badges16 bronze badges

Comments

chaggy · Accepted Answer · 2023-04-08 19:32:28Z

2

<div v-for="var in variable" :class="'class-'+var">{{ var }}</div>

this is a simple way to dynamically create a class dependent on the variable

answered Apr 8, 2023 at 19:32

chaggy

1,1511 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to add class from content of a variable in Vue.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related