[Vuejs]-Looking for a solution for a conditional class binding in the existing project

by

1👍

Easy way: (recommended) You can use the class attribute from the ChildElement in your Parent Component.

// PARENT
<template>
  <div>
    <child-component class="your customm classes which you want pass" />
  </div>
</template>

And vue will do the magic and adding the classes to your child.

Long way:
You can pass an array of objects instead only a object. :class="[customClass, {'some-class': comeConidtion}]".

<template>
    <a :href="linkTo" class="dropdown-item" :class="[{'bg-red': conditionA}, customClass]" :tabindex="disabled ? '-1' : undefined" @click="click">
        <slot></slot>
    </a>
</template>
👤Maik Lowrey

Leave a comment