EmberJS: Computed property awareness of dependent keys - ember.js

Question

Let's suppose I have an object that has this structure:
{ filters: [{ params: { value: ["abc"] }] }.
How can I write a computed property that is aware of changes to the value property? For example, let's say we take one of the filters and do set(filter, 'params.value', ["abc", "123"]). I've been trying with computed('filters.#each.params.value.[]', ...) but it isn't working

Answer 1

Alright, I guess I know how to help you. First of all it seems to be impossible to have a computed property with deeply nested keys after #each. That's why in order to make this work one has to split it. Something like this:
export default Component.extend({
init() {
this._super(...arguments);
this.o = {filters: [{params: {value: ["abc"]}}]};
},
params: computed('o.filters.#each.params', function () {
return this.o.filters.mapBy('params');
}),
paramsValue: computed('params.#each.value', function () {
let aaa = this.params; // it seems like we need to reference the params anyhow
return JSON.stringify(this.o);
}),
#action
changeClassic() {
let filter = this.o.filters[0];
set(filter, 'params.value', ['abc', '123']);
}
});
I also tried to solve the same problem in case of a glimmer component with #tracked. There I had to use a separate class and make the value field tracked:
class ValueHandler {
#tracked value;
constructor(value) {
this.value = value;
}
}
export default class DeepObjectTestComponent extends Component {
#tracked o = {filters: [{params: new ValueHandler('abc')}]};
// so here I don't need an intermediate computed (hope this works for a more complicated scenario
get paramsValue() {
let aaa = this.o.filters[0].params.value;
return JSON.stringify(this.o);
}
#action
changeGlimmer() {
let filter = this.o.filters[0];
// set(filter, 'params.value', ['abc', '123']);
filter.params.value = ['abc', '123'];
}
}