Computed inside array of object

[ardyfeb]

Hello 👋

I have state like this

const order = proxy(
  {
    items: [],
    get total() {
      return this.items.reduce((total, item) => total + item.total), 0)
    }
)

order.total is a computed property that depends on items[].total. I can't define getter inside items[], how to define computed getter total inside items[]?

Currently, i define getter for every new entry inside items[]

function appendItem(item) {
  order.items.push(
    {
      ...item,
      get total() {
        return this.price * this.quantity
      }
    }
  )
}

Does it's right? or is there have official / best way to handle this?

[dai-shi]

I haven't tried, but does this hopefully work?

const initialObj = {
  items: [],
}
Object.defineProperty(initialObj.items, 'total', {
  get() { return ... }
})
const state = proxy(initialObj)

[dalcib]

Putting all together:

const order = proxy({
  items: [],
  get total() {
    return this.items.reduce((total, item) => total + item.subtotal, 0);
  },
  add(item) {
    this.items.push(
      {
        product: "",
        price: 0,
        quantity: 0,
        get subtotal() {
          return this.price * this.quantity;
        },
        ...item
      })
  }
});

order.add();
order.items[0].product = "xxx";
order.items[0].price = 12.34;
order.items[0].quantity = 4;
order.add();
order.items[1].product = "yyy";
order.items[1].price = 45.67;
order.items[1].quantity = 2;
order.add({
  product: "zzz",
  price: 78.99,
  quantity: 1
});
console.log(order);