@tracked isActive

Hi,

in my template I try use conditional class.

{{#each this.items as |item|}}
  <button class="button is-small {{if this.isActive "is-success"}}" {{action this.select item.id item.name}}>{{item.name}}</button>
{{/each}}

I would like to isActive is true when item.id value is 2. I don`t know how should look isActive property.

Thanks for help.

In model I added

get isActive() { return this.id == 2; }

and works.

1 Like

Yes, and that will update correctly as long as this.id is @tracked. This is the main difference in thinking between computed and tracked.

When working with computed properties (sometimes abbreviated “CPs”), each layer needs to declare its dependencies correctly in order to establish a chain of dependencies (one computed property depends on another which depends on another which eventually bottoms out in normal non-computed proprerties).

When working with the new tracked properties, you only need to mark those underlying non-computed properties as tracked, and all the other layers take care of themselves. Which is why the plain Javascript getter in your example is fine, despite it not saying anything about tracked.