Glimmer Component Change Detection Not Working - Mutating Properties in @tracked Array

Dev
2

Hmm, that’s weird. Doing the array assignment trick usually works.

An alternative I’ve found is to make the objects in the array be from a class with its own tracked properties. Something like:

class CustomSidebarItem {
  @tracked expanded = false;
  constructor(id, label) {
    this.id = id;
    this.label = label;
  }
}

export default class CustomSidebarComponent extends Component {

  @tracked items = [
    new CustomSidebarItem('home', 'Home'),
    new CustomSidebarItem('my-posts', 'My Posts'),
    ...
  ];
  // rest of your code
}

It can be more verbose than making a bunch of plain objects, but I’ve found it makes it easier to extend and reason around, especially if you need to do something like passing the data down to nested components.

4 Likes