Assertion Failed in addTodo method

Hello everyone again! I got an issue . When i call addTodo method on button click and an error is thrown;

todos.js: ` import Route from “@ember/routing/route”;

import { action } from “@ember/object”;

export default class TodosRoute extends Route {

todos = [

    {id: 1, title: "Купить хлеб", completed: false},

    {id: 2, title: "Купить масло", completed: false},

    {id: 3, title: "Купить молоко", completed: false}

];

model() {

    return this.todos;

}

@action

addTodo() {

    this.todos.push({id: 4, title: "Купить печенье", completed: false});

}

} `

todos.hbs: ` {{page-title “Todos”}}

<h1>All Todos</h1>

<div class="add-todos">

</div>

<ul>

    {{#each @model as |todo|}}

        <li>

            <strong>{{todo.id}}</strong>

            <span>{{todo.title}}</span>

        </li>

    {{/each}}

</ul>

<button type="button" {{on 'click' this.addTodo}}>Add Todo</button>

{{outlet}} `

issue: `Uncaught Error: Assertion Failed: You must pass a function as the second argument to the “on” modifier, you passed undefined. While rendering:

this.addTodo at assert (index.js:172) at OnModifierState.updateFromArgs (index.js:7161) at OnModifierManager.install (index.js:7388) at runtime.js:4712 at track (validator.js:826) at TransactionImpl.commit (runtime.js:4711) at EnvironmentImpl.commit (runtime.js:4813) at inTransaction (runtime.js:4838) at InteractiveRenderer._renderRoots (index.js:8563) at InteractiveRenderer._renderRootsTransaction (index.js:8615)`

1 post - 1 participant

Read full topic