Using use:active with conditional classes

[jamauro]

I'm using use:active to style an anchor tag that matches the active route.

I'm also applying a class conditionally to that anchor tag. When I click on the anchor tag, the condition gets updated and my class is removed as expected but it also looks like the active class is being removed.

Any ideas on how I can get these to play nicely together?

Here's a code example:

{#each items as item (item.id)}
  <li>
    <a class='{condition === true ? 'my-class' : ''}' href='/r/{item.id}?q={encodeURIComponent(item.query)}}' use:active>
      {item.name}
    </a>
  </li>
{/each}

[AlexxNB]

Using class directive should solve this issue: <a class:myclass={condition}.... Or you can set classes on parent <li class=....>;

[jamauro]

Awesome, looks good. Thanks!