section 9

This commit is contained in:
Matt Marcha 2024-08-10 12:47:53 -10:00 committed by Matt Marcha
parent 1a7973ad13
commit 6962f20029
2 changed files with 13 additions and 5 deletions

View file

@ -8,10 +8,17 @@ export class TodoList extends Component {
static components = { TodoItem }; static components = { TodoItem };
setup() { setup() {
this.todos = useState([ this.todos = useState([]);
{id: 3, description: "buy milk", isCompleted: false }, }
{ id: 1, description: "have a shower", isCompleted: true },
{ id: 2, description: "sing loudly", isCompleted: false } addTodo(ev) {
]); // If the key was enter and input isn't empty
if(ev.keyCode === 13) {
if(ev.target.value !== '') {
// Let's create a todo
this.todos.push({ id: this.todos.length+1, description: ev.target.value, isCompleted: false });
ev.target.value = '';
}
}
} }
} }

View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve"> <templates xml:space="preserve">
<t t-name="awesome_owl.todo_list"> <t t-name="awesome_owl.todo_list">
<p><input type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
<div class="d-inline-block border p-2 m-2"> <div class="d-inline-block border p-2 m-2">
<t t-foreach="todos" t-as="todo" t-key="todo.id"> <t t-foreach="todos" t-as="todo" t-key="todo.id">
<TodoItem todo="todo" /> <TodoItem todo="todo" />