ember.js: @tracked number not updating template in octane app
In the component below, totalWithDiscount and total are not updated in my template, despite the fact that if I add {{this.cart.total}} to the template, I can see the total change when removeItem is triggered.
export default class CartController extends Controller {
@service cart
@tracked tax = 0
@tracked discount = 0
get totalWithDiscount(){
return (this.cart.total * ((100-this.discount)/100)).toFixed(2)
}
get total(){
return (this.totalWithDiscount * (1 + (this.tax / 100))).toFixed(2)
}
@action
removeItem(item){
this.cart.remove(item)
}
}
However, if I add a local cartTotal property and update that in the component, it works. This feels like an added step though.
export default class CartController extends Controller {
...
+ @tracked cartTotal =this.cart.total
get totalWithDiscount(){
- return (this.cart.total * ((100-this.discount)/100)).toFixed(2)
+ return (this.cartTotal * ((100-this.discount)/100)).toFixed(2)
}
get total(){
return (this.totalWithDiscount * (1 + (this.tax / 100))).toFixed(2)
}
@action
removeItem(item){
this.cart.remove(item)
+ this.cartTotal = this.cart.total
}
}
While I doubt the issue is in the service (remember, the template shows the updated total), here is the service
export default class CartService extends Service {
@tracked items = [];
@service store
@mapBy('items', 'price') prices
@sum('prices') total
add(item) {
this.items = [...this.items, item]
}
remove(item) {
const newItems=this.items.filter(band => band.id !== item.id)
this.items = newItems
}
}
Am I missing something small? From reading the Octane docs, tracked and computed props in other classes should work just like tracked props in the component, right?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (11 by maintainers)
Computed properties and CP macros cannot depend on native getters directly unless you use
@dependentKeyCompat.See macro-decorators for a version that will work when depending on native getters (and all autotracking codepaths).