How to add multiple classes to an element based on props using Vue.js?

Question

First look at my code to understand the problem.

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

so as you can see here do i have my flat prop that will trigger a flat class to show a box-shadow or not. But i also want someone to trigger the app prop that will put some padding in the header.

the problem here is dat you can't put multiple :classes in a element. is there any solution for this?

Check the docs: vuejs.org/v2/guide/class-and-style.html

cdrini
– cdrini

2019-04-14 22:23:52 +00:00
Commented Apr 14, 2019 at 22:23 — cdrini
– cdrini, Commented Apr 14, 2019 at 22:23

Jair Reina · Accepted Answer · 2021-06-03 22:46:29Z

10

There are several ways to achieve what you're trying to do, Vue is great at this.

1. Pass an array of classes

<div 
  class="header" 
  :class="[flat ? 'flat' : null, app ? 'app' : null]"
></div>

2. Pass an object

<div 
  class="header" 
  :class="{flat: flat, app: app}"
></div>

Here, only the props that have a truthy value will be set as classes.

2.1 If you're using ES6 You can use the object property value shorthand

<div 
  class="header" 
  :class="{flat, app}"
></div>

Bonus

You can also mix 1 and 2 if necessary (I've needed it sometimes)

<div 
  class="header" 
  :class="[{flat, app}, someOtherClass]"
></div>

edited Jun 3, 2021 at 22:46

answered Apr 15, 2019 at 3:12

Jair Reina

2,93527 silver badges22 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 20:39:58Z

7

Try to combine them in the same class attribute as follows:

<div class="header"
  :class="{ 'flat':flat,'app' : app}"
>header</div>

See the official documentation

edited Jul 15, 2022 at 20:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 14, 2019 at 22:09

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Potato Salad · Accepted Answer · 2019-04-15 01:10:47Z

1

You can create a method that returns the same object as @Boussadjra Barhim answer.

//if value is evaluated into true, the key will be a part of the class
setClass: function(flat, app){
    return {
      flat: flat, 
      app: app
    }
}

Use it via

<element :class="setClass(flat, app)" />

But in this case you can write other longer code (without uglifying the template) to process the values before returning an object

setClass: function(flat, app){
    //do something else with inputs here
    return {
      flat: flat, 
      app: app
    }
}

answered Apr 15, 2019 at 1:10

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to add multiple classes to an element based on props using Vue.js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related