I have a component property in my component.js
based on which i will show/hide some data in template.hbs
Case1:
By default the componentProperty (canShow
) is true, but based on some change in data it will be set false in another computed property
.
dataChanged: computed( 'data', 'canShow', function () {
let someCalc = doSomeCalc;
if(someCalc !== 0) {
this.set('canShow', false);
}
return someCalc;
});
Expected: Canshow
should be false, so the data in template should be hidden
Result: It is getting updated as false, But in template the data is still showing
Case2: I have tried this with getter and setter in computed.
canShowTemplateData: computed('canShow', {
get() {
return this.get('canShow');
},
set(key, value) {
return value;
}
});
Even in this case, set is working fine. But the value is not at all updated in template using get() function. Also pls clarify while using set(), which value should be updated either canShow
or canShowTemplateData
?
Am I missing something? Or is there any other way to handle this?
First, computed properties should never have side effects. So never call this.set
in a computed property, or do something like this.foo = ...
.
Your first computed property is also problematic: its never returning anything.
Your second example with the setter does not make sense. Your setter is not really doing anything.
What you want is probably something like this:
canShow: computed( 'data', function () {
if(it is true) {
return false;
} else {
return true;
}
});