Now we can add and view and update the todos,
the last missing crowd functionality here
is that we can delete todos.
Before we're done, of course,
we'll also wire this up to a custom API
so that we really see
how we could have replaced this JavaScript code
with Vue.js.
But you hopefully already see
that it's way easier
and way more straightforward in the end.
Now when it comes to deleting todos,
that is really simple.
We can just add another method in our methods object here
where we also added saveTodo and startEditTodo.
And well, fittingly, I'll name it deleteTodo.
And just as with startEditTodo,
I expect to get the id of the todo that should be deleted
as a parameter value.
And then we wanna basically go to our todos array,
so this data todos array here,
and filter it such that that todo that has the id
that we get as a parameter value here
is removed from that array,
that it's filtered out.
So I wanna set this.todos = this.todos.filter,
another built-in method which we have used before
in the course already,
which allows us to filter out elements in an array.
Filter will return a new array,
which is the old array minus all the elements
for which a function that we pass to filter returned false.
This function, as always,
will execute for all the todoItems
step by step after another.
And if we return true, we keep an item.
If we return false, we drop it.
And, of course,
therefore we don't wanna hard code true or false,
because that would keep or drop all items.
But instead, we wanna have a condition here,
and the condition here
is that todoItem.id is not equal to todoId.
That means that if a item at which we're looking
has an id that's not equal to this id,
we will return true,
which means we'll keep it.
If we have an item where the id is equal to this id,
this will return false and therefore we will drop it,
and that's exactly what we want to achieve.
And that is all we have to do here.
The rest, again, will be done by Vue.
It will see that todos changed
and therefore update our DOM
in the places where we used todos, like here in this list.
We just have to wire up this delete button
and, again, add a click listener
and point at deleteTodo
and again pass todo.id to deleteTodo.
And that is really all.
With that, if I add a new todo
and a second todo,
and a third todo here,
I can, of course, still edit them.
All these todos can be edited,
but I can also delete the second todo,
and now only a new todo and a third todo is left.
And I can delete all todos,
at which point I see my initial message again.
And that is Vue.js in action.
Now as I said, Vue.js has way more to offer,
and we're not entirely done with this section yet,
but you hopefully see why Vue.js is amazing.
We have some HTML code
which is highly readable and fully declarative.
We express what we wanna have,
that we wanna have list items,
multiple of list items, for our todos,
that we wanna have click listeners and so on.
This is highly understandable.
And we have a little bit of JavaScript code.
If I zoom out quite a bit,
you see it's not that much code.
And most importantly,
it's highly structured and understandable.
Compare that with the other code from before.
That's way more code and way harder to understand.
Sure, there we are sending HTTP requests,
something which is missing here,
but even without that,
this code here would be longer,
and more importantly, it would be more complex.
Creating all these elements manually,
selecting the places where they should be added,
adding event listeners manually.
This is, as mentioned initially, highly error prone
and definitely not how we wanna build
more complex user interfaces.
Instead, building user interfaces like this
is a breeze with Vue or React and Angular,
and that's why you should definitely
have a look at such frameworks
if you are planning to build JavaScript-driven,
front-end web interfaces.
Now with that,
let's also see how we can handle HTTP requests here.