Append CSS class to element

Question

I have a model, i.e. like this:

[{
    "Name" : "Foo",
    "CssClass" : "class1"
},
{
    "Name" : "Bar",
    "CssClass" : "class2"
}]

Which is presented using the following template:

<li v-for="foobar in model">
    <span class="otherclass anotherclass">{{foobar.Name}}</span>
</li>

How could I append the CssClass property to the span?

I know you could do :class="{ active: isActive }" (as per the documentation), but this uses a predefined class called active, whereas I want to append the class name from the model.

I tried using <span class="otherclass anotherclass" :class="foobar.CssClass"> but that didn't add CssClass to class at all.

How could I go about making this work so that the <span> will effectively be rendered as <span class="otherclass anotherclass class1"> (for the first model entry)? And how could I also use a default value in case CssClass is not defined?

Trevor V · Accepted Answer · 2018-10-20 20:13:52Z

4

You can append the class like so

<li v-for="foobar in model">
    <span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}}</span>
</li>

I ran into the same issue in the past. During render all three classes will combine into one class="my_class_from_foobar otherclass anotherclass"

answered Oct 20, 2018 at 20:13

Trevor V

2,1611 gold badge16 silver badges34 bronze badges

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

2 Comments

TheHvidsten Over a year ago

I had already tried with :class="foobar.CssClass", but that didn't yield any result at all. (I should probably have specified that in the question, so I'll do that after this comment)

TheHvidsten Over a year ago

It seems my error was not passing along the .CssClass from one model to another. I tried recreating it in jsfiddle but no matter what I did it always worked... which lead me to my own models. Thanks for the input :)

pretzelhammer · Accepted Answer · 2018-10-20 20:14:27Z

1

You can pass an object or an array to :class. You can also use class and :class together and Vue will resolve both correctly without issues:

<li v-for="foobar in model">
    <span class="otherclass anotherclass" :class="[foobar.CssClass]">{{foobar.Name}}</span>
</li>

answered Oct 20, 2018 at 20:14

pretzelhammer

15.4k16 gold badges56 silver badges105 bronze badges

1 Comment

TheHvidsten Over a year ago

I had already tried with :class="foobar.CssClass", but that didn't yield any result at all. I also tried with your bracket syntax :class="[foobar.CssClass]" but that didn't yield any results either

burak ataseven · Accepted Answer · 2018-10-20 20:27:34Z

1

<li v-for="foobar in model">
  <span :class="'otherclass anotherclass ' + foobar.CssClass">{{foobar.Name}</span>
</li>

<li v-for="foobar in model">
  <span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}</span>
</li>

Both should work

answered Oct 20, 2018 at 20:27

burak ataseven

111 bronze badge

Collectives™ on Stack Overflow

Append CSS class to element

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related