对象属性的值在 Ember 的本地存储中没有改变

Question

I'm building a shop in Ember with the list of products that are being added to Local Storage when the user clicks on the add to cart button. Each product is an object that has a property called ordered_quantity , I'm trying to change this property's value when the user tries to remove the product from the cart. (example: ordered quantity: 8 , when the button is clicked it should be 7 ).

I have the following code in my service file:

remove(item) {
  let new_arr = this.get('items');
  let elementIndex = new_arr.findIndex(obj => {
    return obj.id === item.id;
  });

  if (elementIndex !== -1) {
    new_arr[elementIndex].ordered_quantity = new_arr[elementIndex].ordered_quantity - 1;
  } 
  this.set('cart.items', new_arr);
}

I'm using Local Storage add-on ( https://github.com/funkensturm/ember-local-storage#methods )

and I have the following action:

actions: {
  removeFromCart(){
    this.get('cart').remove(this.product);
  }
}

When I try to run the following code I get an error:

Uncaught Error: Assertion Failed: You attempted to update [object Object].ordered_quantity to "7", but it is being tracked by a tracking context, such as a template, computed property, or observer. In order to make sure the context updates properly, you must invalidate the property when updating it. You can mark the property as @tracked , or use @ember/object#set to do this.

I tried using the set function like this:

let updated = item.ordered_quantity - 1;
set(item, 'ordered_quantity', updated);

https://api.emberjs.com/ember/release/functions/@ember%2Fobject/set and the code worked with no errors as expected, but the value of my property ordered_quantity was not updated in the Local Storage.

Answer 1

You need to adapt the set function to your use-case:

remove(item) {
  let new_arr = this.get('items');
  let elementIndex = new_arr.findIndex(obj => {
    return obj.id === item.id;
  });

  if (elementIndex !== -1) {
    set(new_arr[elementIndex], 'ordered_quantity', new_arr[elementIndex].ordered_quantity - 1);
  } 
  this.set('cart.items', new_arr);
}

Answer 2

Based of @Lux's original answer (and to also update for the Ember 3.16+ era), I wanted to add that you could use functional programming patterns to clean things up a little bit:

If in your cart Service, items is @tracked , like so:

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class CartService extends Service {
  @tracked items = [];
}

Note: assumes that ordered_quantity is not tracked.

remove(item) {
  for (let obj of this.items) {
    if (item.id !== obj.id) continue;

    // set must be used because quantity is not known to the tracking system
    set(obj, 'ordered_quantity', obj.ordered_quantity - 1);
  });

  // invalidate the reference on the card service so that all things that
  // reference cart.items re-compute
  this.cart.items = this.items;
}

Here is a live demo: https://ember-twiddle.com/e18433b851091b527512e27ae792640c?openFiles=components.demo%5C.js%2C

There is also a utility addon, which allows for more ergonomic interaction with arrays, objects, etc: https://github.com/pzuraq/tracked-built-ins

the above code would then look like this:

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { TrackedArray } from 'tracked-built-ins';

export default class CartService extends Service {
  @tracked items = new TrackedArray([]);
}

and then in your component:

remove(item) {
  for (let obj of this.items) {
    if (item.id !== obj.id) continue;

    // set must be used because quantity is not known to the tracking system
    set(obj, 'ordered_quantity', obj.ordered_quantity - 1);
  });
}

Here is a live demo: https://ember-twiddle.com/23c5a7efdb605d7b5fa9cd9da61c1294?openFiles=services.cart%5C.js%2C

You could then take it a step further, and add tracking to your "items".

so then your remove method would look like this:

remove(item) {
  for (let obj of this.items) {
    if (item.id !== obj.id) continue;

    obj.ordered_quantity = obj.ordered_quantity - 1;
  });
}

And here is a live demo: https://ember-twiddle.com/48c26e2e0f0e5f3ac7685e4bdc0eda4e?openFiles=components.demo%5C.js%2C