Skip to content

Vue 2, how to use a prop as the class name

New Course Coming Soon:

Get Really Good at Git

Sometimes you pass a prop to a component, and you want to use that prop value as the class name. How to do that?

Say you have a Car component.

You want to add a class to its output based on a prop.

So maybe the prop is called color, and you use it like this in other parts of the app:

<Car color="red">
<Car color="blue">

In your Car component you first need to declare the color prop:

<script>
export default {
  name: 'Car',
  props: {
    color: String
  }
}
</script>

then you can use it in the template part:

<template>
  <div :class="color"></div>
</template>

If you want to add a car class, plus the class determined by the color prop, you can use this syntax:

<template>
  <div :class="['car', color]"></div>
</template>

Happy coding!

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my Vue.js 2 Handbook

Here is how can I help you: