How to replace css class name partially in Vue?

Question

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>

you can try this <div :class="`progress-bar w-${progress.value}`"></div> — Naren
– Naren, Commented Dec 7, 2020 at 4:49

Muhammad · Accepted Answer · 2020-12-07 07:51:27Z

2

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

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

edited Dec 7, 2020 at 7:51

answered Dec 7, 2020 at 4:48

Muhammad

7,4245 gold badges50 silver badges58 bronze badges

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

Comments

Phil · Accepted Answer · 2020-12-07 04:48:12Z

1

You can achieve text-binding in this way

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

edited Dec 7, 2020 at 4:48

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Dec 7, 2020 at 4:00

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

1 Comment

Amaarockz Over a year ago

@Steve - Great! If it works for you and you are happy - then in general you would accept the answer. This will not only help other people with the same issue but it will also mean people are more likely to help you in the future with any other issues you have. Thankyou

Collectives™ on Stack Overflow

How to replace css class name partially in Vue?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related