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?

Answer 1

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>