Render css class in variable in condition

Question

I am trying to create component where I will set 2 properties:

string property for class name which should be set
boolean property which resolve if this class will be added

my component looks like this:

<template>
      <span v-bind:class="{ classProp : booleanProp}"></span>
</template>
<script>
    export default {
      props: {
        classProp: {
          type: String,
          default: 'bg-alert'
        },
        booleanProp: {
          type: Boolean,
          default: false
      }
    }
</script>

When I use this component as you can see in following code span element has class classProp instead of bg-success

<my-component :booleanProp="true" :classProp="bg-success"></my-component>

required output:

<span class="bg-success"></span>

given output:

<span class="classProp"></span>

Thanks for answers.

tony19 · Accepted Answer · 2022-07-15 22:36:02Z

2

Vue's object syntax for class will use classProp as the class name (same as would do it JavaScript for an object key), instead of computing it. For that you have to ES6's computed property name syntax:

<template>
      <span v-bind:class="{ [classProp] : booleanProp}"></span>
</template>

Also, when using v-bind (or the shorthand, :) dont forget to pass strings as you would in JavaScript, enclosed in quotes (or, you could omit the binding and instead pass it as a regular prop classProp="bg-success"):

<my-component :booleanProp="true" :classProp="'bg-success'"></my-component>

JSFiddle (don't mind the kebab-case props)

edited Jul 15, 2022 at 22:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 22, 2018 at 18:59

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Render css class in variable in condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related