Todo-data.js:48 Uncaught TypeError: this.todos.pushObject is not a function?

class Todo {
  @tracked text = '';
  @tracked isCompleted = false;

  constructor(text) {
    this.text = text;
  }
}

export default class TodoDataService extends Service {
  @tracked todos = [];
  get all() {
    return this.todos;
  }
  

  @action
  add(text) {
    let newTodo = new Todo(text);

    this.todos.pushObject(newTodo);
  }
}

howcan i solve this error…somebody help

use push instead of pushObject , javascript arrays does not have pushObject method,

when you push objects to the array , @tracked doesn’t deep track objects , for @tracked todos still the same , so assign it an new array to make it re-render the content on the hbs this.todos = [...this.todos];

i made the changes on the following link Ember-todo - StackBlitz

1 Like

Thank You Man …you are a life saver…

1 Like

you are welcome, https://rfcs.emberjs.com/id/0848-deprecate-array-prototype-extensions this is good to read to understand why you get the error, ( older version of embers extends by default ember mutable arrays that has pushObject , and in recent Ember versions this was deprecated )

1 Like