Insert v-for data into css class in Vuejs2

Question

<template v-for="d in data" >
     <a :key="d.id" class="zone{{d.value}}" href="{{d.code}}" >{{d.name}}</a>
</template>

This example just doesn’t work, how can I pass the values then within "d" to the attributes? How do I resolve this impasse?

Answer 1

I didn’t quite understand the doubt, but I think the problem is in the way you’re using the interpolation.

The interpolation "{{}}" is used only between the tags, and not within them, referencing their variables that are within computed or his data ().

In case, in a tag inside an attribute nay interpolation is used, rather than v-bind: or the two points ":", which is exactly equal to v-bind, but in a shorter form to use it.

Your code in case I think would look like this:

<template v-for="d in data" >
     <a :key="d.id" class="zone" :class="d.value" :href="d.code" >{{ d.name }}</a>
</template>

I just don’t quite understand what you wanted to do exactly in the case of the attribute class, so I assumed the class zone is static, and the d.value shall be another dynamic class, against the value of the variable.

In this case it has no problem of having two class attributes in a tag, Vuejs will perform a merge of all classes automatically, of the dynamics with the static ones.