So now we learned some important basics
about Vue.js, and most importantly,
we see its declarative nature in action,
now let's manage some real todos here in the unordered list.
And by the way,
we will later also send them to the backend and so on.
But for the moment, let's ignore the API
and just update this in the browser,
which of course means the todos won't be stored
in any database, but we will learn Vue.js along the way.
So therefore now, I will actually get rid of this h2
and paragraph element here because that was just a demo.
Instead now, when saveTodo is triggered,
I wanna add a new todo to my todo list.
I also might want to update an existing todo,
but that will be the next step thereafter.
Let's start with adding a new todo.
Therefore here, I will get rid
of the newTodo data property here
because we needed that for the demo only.
And instead here in saveTodo,
I'll add a newTodo constant,
which is a new object that I create on the fly,
where I will store the text here
which is my enteredTodoText.
And thereafter, I actually still wanna clear enteredTodoText
so I will reintroduce this line.
I also wanna give every todo at least a pseudo unique ID
because I'll need that later.
For this, I'll give this an ID, which is new Date,
which is this built-in date object
which you can use in both browser side
and backend JavaScript code, which if used like this,
it gives you the current date-time snapshot.
On that, we can call toISOString which gives us
a machine-readable string version of that date.
And unless we now create two todos
in exactly the same millisecond,
we therefore should have a pretty unique ID here.
It's good enough for this demo.
Now this newTodo should be stored in an array of todos,
which we then use for populating
this to todos unordered list.
Now I'll add this array of todos
as a new data property here in this object,
which is returned by data,
and I'll name it todos
and set it equal to an empty array just like this.
Now, it's a data property instead of a constant down there,
because I will use this todos array
in my HTML code in the future.
This newTodo constant, on the other hand,
is only needed temporarily
for storing this newTodo in this array,
because that's the next thing I'll do here.
We can reach out to this todos
because again thanks to Vue,
we can reference this data object
with this from inside our methods.
And then we can use the built-in push method,
which exists on all JavaScript arrays
to add a new piece of data into that array.
And in this case, I'll add to this newTodo object
to this todos array.
So now when saveTodo is triggered,
a newTodo object will be added to this array.
Now that's nice and that should work,
but we wouldn't see anything on the screen
because we're not binding this todos array
to any place in our DOM.
And that's now the part that should change.
Now, I want to let Vue populate
this unordered list with my todos
and that will now be the part
where the difference to just JavaScript,
where we had to create all the todo list items like this,
will be most visible.
It will now be much easier when using Vue.
Because with Vue,
again we use a declarative approach
and therefore we describe our desired end result.
Now, our desired end result or end state
is that we have list items here in this unordered list.
Now, of course, not just one but many list items,
but let's start with one.
Now in every list item,
I then want to have a paragraph with the todo text
because that is what I did in todos.js before as well.
I created a paragraph and set the todoText.
And therefore, I'll do that here as well.
Now, since we use Vue here,
we can use these double curly braces
to let Vue output the text for us.
However, we don't just have one todo but multiple todos
so we will see what we enter here later.
We also know that we wanna have a div
with two buttons though, a edit button and a delete button.
That is something we definitely know as well.
And now, as I mentioned,
we want to tell Vue that it should create one list item
per todo in this todos array.
And for this, Vue got another special attribute,
a so-called directive.
All those special Vue attributes that start with v dash
or with @ are called Vue directives.
And the Vue directive we need now on the li element
is the v-for directive, the v-for attribute,
which is another special attribute Vue will be looking for.
And this allows us to loop through elements
inside of the HTML code,
a little bit as we did it with EJS on the backend,
but even simpler because we just need to add that
on the element that should be replicated
and we don't need to add
any opening or closing curly braces.
Instead, we add v-for on the li element
because I wanna replicate this.
And then here we can just write todo in todos.
Now, todos here is actually
the name of our data property here.
So if you chose a different name here,
you will have to choose a different name here as well
because we're telling Vue that we wanna go through
all the pieces of data in this data property,
which should be an array.
This name here todo is up to you though.
But since we will have single todo items in there,
todo is a fitting name
because this will now be a variable
that's available inside of this replicated element now.
So inside of this li element,
which has this v-for directive,
this todo key, this todo variable will be available
referring to one individual todo per repetition.
So that means that here,
if I wanna output the todoText, I can refer to todo.text
because I added todo here
with a text property that stores the text,
and therefore I can output the text here.
And for the moment, that's it.
That should lead Vue to create one new list item
with that content inside of it,
which does contain dynamic data itself per item
in this todos array.
And as this todos array changes,
just as before with that string that we changed,
Vue will revisit the DOM and for example add a new list item
if a new item was added to the todos array.
So here, if we now reload,
you might see this flash here down there briefly,
that only happens here in development
because of how we load this Vue library.
This is something we can prevent
as we dive deeper into Vue so we can ignore that for now.
And we can now add again a new todo and click save.
And here, our item appears.
The buttons won't do anything, but we added a new todo.
And if I add a second todo, this also works.
And I mean, compare this JavaScript code here
and this HTML code, which is very readable,
to this code here which we had to use
for creating a todo before.
Yeah, that is definitely simpler.