Take a look at my code to grasp the issue.
<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>
Here we have the flat prop triggering a class for displaying or hiding box-shadow, and the app prop adding some padding to the header. However, the limitation is that only one :class can be used in an element. Is there a workaround for this?