CODEWITHSUNDEEP
vue.js
Steve
Steve

Reputation: 4463

How to replace css class name partially in Vue?

Let's say I have this html element

<div class="progress-bar w-90"></div>

and I want to replace 90 with an object from vue. I tried below but syntax

<div :class="progress-bar w-{{ progress.value }}"></div>

Upvotes: 1

Views: 465

Answers (2)

Muhammad
Muhammad

Reputation: 7324

You cannot use {{ }} in attribute/props, better to use template literals as below.

<div :class="`progress-bar w-${progress.value}`"></div>

Upvotes: 2

Amaarockz
Amaarockz

Reputation: 4684

You can achieve text-binding in this way

<div :class="'progress-bar w-'+progress.value"></div>

Upvotes: 1

Related Questions