Vue.js: Dynamic class names via v-bind

As defined in vue.js official documentation:

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays.

Class and Style Bindings

In this post I will not explain Props/Data or how to write parent and child components, but in case you need more information; take a look at official documentation about props.

Or read my earlier post regarding Single File Component

Let’s look at the basic implementation of v-bind first. We can pass a JSON object to child component or single value could be a String, Number or Boolean.

Following example shows how to add single CSS class to the component

<div v-bind:class="{ active: isActive }"></div>

The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

Multiple classed can be added to the component, let’s follow the example below.

Template:

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

Supperting data:

data: {
  isPublished: true,
  hasError: false
}

It will render when isPublished is true and hasError is false:

<div class="static active"></div>

As hasError value is changed to false, following will be output

<div class="static active text-danger"></div>

So far we are looking at basic implementation, but what if we need single or multiple class names in v-bind that changes based on props or data value.

Object.vue

<template>
  <span class="Object">
    <img
      src="https://danyal.dk/some-image.png"
      v-bind="objectKeyBindings"
    />
  </span>
</template>

<script>
export default {
  name: 'Object',
  props: {
    object: {
      type: String,
      default: null
    },
    objectId: {
      type: Number,
      default: 0
    },
   objectName: {
      type: String,
      default: null
    },
  },
  computed: {
    objectKeyBindings() {
      return {
        [`data-${this.object}-id`]: this.objectId,
        [`data-${this.object}-name`]: 'Some Value'
      }
    }
  }
}
</script>

Usage of Tree component:

<Object objectId="1" object="tree" objectName="Juniper">
<Object objectId="1" object="fruit" objectName="Apple">

Output will be:

<span><img src="https://danyal.dk/some-image.png" data-tree-id="1" data-tree-name="Juniper"></span>

And

<span><img src="https://danyal.dk/some-image.png" data-fruit-id="1" data-fruit-name="Apple"></span>

This is how you can utilise v-bind for assigning classes & values dynamically.