CODEWITHSUNDEEP
vue.jsvue-component
StevenBoyce
StevenBoyce

Reputation: 471

How to include a dynamic class as well as a conditional dynamic class to a child component in Vuejs

I have a GenericButton component that I need to pass a couple of props into. One is for the class it will use and another is a class that will apply if the button is disabled. I read the Vue docs here: https://v2.vuejs.org/v2/guide/class-and-style.html, but I am still having issues. in the docs, they say you can do this to bind a class to a JS expression, and even bind multiple classes.

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

I pass a prop called injectedClass and one called isDisabled. This is my button:

<button
    :disabled="isDisabled"
    :class="{ injectedClass, disabled: isDisabled }"
    @click.stop="handleClick"
  >
    {{ text }}
  </button>

The disabled class applies how I would expect, but my passed injectedClass isn't applied. The injectedClass is applied if I do this:

<button
    :disabled="isDisabled"
    :class="injectedClass"
    @click.stop="handleClick"
  >
    {{ text }}
  </button>

It isn't even working if I do this:

:class="(injectedClass, { disabled: isDisabled })"

My question is how can I apply the class I pass through to my component and also conditionally apply my disabled class?

Upvotes: 0

Views: 1950

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37773

Just use an array syntax

:class="[injectedClass, { disabled: isDisabled }]"

Upvotes: 2

Related Questions