How to bind css class in vue js template within a v-for loop?

Question

How do I name my td class the name of the step in this example?

<td v-for="steps in item.steps" v:bind:class="item.steps.name">
 {{ item.steps.name }}
</td>

In this example, my class gets literally named items.steps.name rather than the return value. Everything else works.

Orkhan Alikhanov · Accepted Answer · 2019-05-31 23:39:32Z

1

Use v-bind:class not v:bind:class

answered May 31, 2019 at 23:39

Orkhan Alikhanov

10.2k4 gold badges50 silver badges66 bronze badges

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

4 Comments

r0ulito Over a year ago

That's why i always use ":attribute" to bind ^^ I didn't even see that, nice done pal :)

david Over a year ago

can i use v-bind:class and v-bind:style in the same line?

Orkhan Alikhanov Over a year ago

Yes you can do that

david Over a year ago

alright thanks - for some reason i can't bind style? stackoverflow.com/questions/56402920/…

r0ulito · Accepted Answer · 2019-05-31 23:33:52Z

0

That's cause you are looping over item.steps with each iteration named steps and you use the variable you are looping over in the class-binding.

Try steps.name instead.

answered May 31, 2019 at 23:33

r0ulito

4973 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to bind css class in vue js template within a v-for loop?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related