no-deeply-nested-dependent-keys-with-each.md

ember/no-deeply-nested-dependent-keys-with-each

💼 This rule is enabled in the ✅ recommended config.

Disallows usage of deeply-nested computed property dependent keys with @each.

For performance / complexity reasons, Ember does not allow deeply-nested computed property dependent keys with @each. At runtime, it will show a warning about this:

WARNING: Dependent keys containing @each only work one level deep. You used the key "[email protected]" which is invalid. Please create an intermediary computed property.

Examples

Examples of incorrect code for this rule:

export default Component.extend({
  displayNames: computed('[email protected]', function () {
    return this.todos.map((todo) => todo.owner.name);
  }),
});

Examples of correct code for this rule:

export default Component.extend({
  displayNames: computed('[email protected]', function () {
    return this.owners.mapBy('name');
  }),

  owners: computed('[email protected]', function () {
    return this.todos.mapBy('owner');
  }),
});

Further Reading

• See the documentation for Ember computed properties with @each