Multiple classes from variables names

[m0onspell]

I have to keep my class names in variables, and following won't work:

<some-tag>
  <div class={classes['first-class']: true, classes['second-class']: true}></div>
  <script type="babel">
    this.classes = opts.classes;
  </script>
</some-tag>

I can create a mixin function to concat those classes, but is there any native way to have multiple classes from variables names?

[cognitom]

Hi @m0onspell, try this simply:

<div class="{classes['first-class']} {classes['second-class']}"></div>

FYI, Computed property names is introduced in es6, but I think it's not supported in Riot yet. And even if it was supported, {classes['first-class']: true} doesn't make sense. It would be {[classes['first-class']]: true}.

[m0onspell]

@cognitom thank you.
Yeah, I know, I just wanted to demonstrate the general idea.

[m0onspell]

One note: you shouldn't use , just

<div class="{classes['first-class']} {classes['second-class']}"></div>

[cognitom]

Oh, right. I've fixed the comment above. Thanks.