Let's consider following template:
<ul class="clearfix">
<li each={ timeslot, i in events }
class={ ??? }
data={ timeslot }
style="width: { timeslot.len*100 }px;">
<div>{ timeslot.start.format() }</div>
<div>{ timeslot.title }</div>
</li>
</ul>
I have a state
property in my timeslot
object, that has the exact same set of values I would like to use as class names. Thus it would be straightforward to use class={ timeslot.state }
. But class is evaluated differently.
Is there any way to avoid expressions in this case and use the property as it is as class name?
Thank you.
When you use a
{}
expression, it can be evaluated in a number of ways. If you are setting as an object, IE:class={foo: true, bar: false }
it is treated like a list of class names to add based on whether the value of each key is true-ish.BUT... if you do
class="{ timeslot.classname }"
- it will instead be treated like a string and the output will be theclass="whatever"
you are looking for... as long astimeslot.classname
is a string.