I'm going insane here with the non-specific error messages of sfdx.

<div class="item slds-col slds-size_{! v.itemsPerRow == 1 ? '12' : '4' }-of-12">

produces the error

Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}

while it should work in my opinion. Any clues?

1 Answer 1


As the error states your attribute value cannot mix a literal string with an expression.

You need to reformat your markup with just an expression like this:

<div class="{! 'item slds-col slds-size_'+ (v.itemsPerRow == 1 ? '12' : '4') + '-of-12' }">
  • My apologies--please ignore the previous comment. I just didn't look close enough.
    – sfdcfox
    Feb 10, 2020 at 15:41
  • Thanks! I was confused because I thought that the error message refers to the part in between the brackets {} only.
    – Hans
    Feb 11, 2020 at 13:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .