Using a ternary on class name causes warning "missing attribute name"

Help Requests
1

I have a navmenu.html that has a dropdown. I wanted to be able to add a divider as part of the dropdown options. I asked a question on SO and received this answer which I thought would work.

However upon changing the <li></li> component to this:

   <li repeat.for="menu of route.settings.nav" class=${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}>

I am getting warnings on both options of that class ternary operator.

Missing attribute name.

…and it now doesn’t render the next level of menu items. Its like the ternary operator is not working.

I don’t think I can use a if.bind for this as its the

  • for the repeat statement

    Is there a way of testing whether a value exists in settings (as I am doing) and if so, change the class to a different value as a result?

    • 2

    You may need to wrap your class attribute value in double quote ", without the quote, it shouldn’t work.

    3

    Changed the single quote to a double quote round it and still the same error. You can see from the picture that both options have green underlines.

    attribute name missing
    attribute name missing.png1716×188 25.2 KB

    4

    I mean quote around the expression:

    <li
  repeat.for="menu of route.settings.nav"
  class="${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}">
    5

    I had no idea you needed the double quotes around the the whole thing. It works now… appreciate the time…

    6

    Browser looks at expression without quote in different way, unlike us. This is what you have without quote:

    <li
  class="${menu.navSettings.divider"
  ?=""
  'divider'=""
  :=""
  'dropdown-submenu'="">