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)

Most upvoted comments

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).