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.

Answer 1

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

Answer 2

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.