Now, being able to create and edit,
and delete todos, here, with help of Vue.js
and our browser is great because now we understood
the basics of Vue.js, and you can hopefully see
why using a framework like Vue.js can be very helpful
when you're building a JavaScript-driven web interface.
A user interface, running in the browser,
which heavily relies on JavaScript.
Vue.js, as you can see here, can really help you with that.
But of course, this interface doesn't use
any API.
And before in the course, in the previous course section
where we built the API, I, of course, wrote JavaScript code
that ultimately did not just update the UI,
but which also sent HTTP requests to our API.
And I wanna get back to that, and I now want to connect
this Vue.js code to this API we worked on before.
Now, therefore, I started that API
from the last course section again,
and therefore, I also started my MongoDB database again
so that I have this server up and running,
and I have my API web server up and running here
with help of nodemon and thanks to npm start.
And with that all up and running, of course,
now I can connect my Vue.js code to that API
so that when we do add a newTodo,
we don't just add that locally,
but also on our server by sending a request to that API.
And therefore, let's actually start with that case
that we are creating a newTodo,
which you wanna add to our API.
For this, I wanna send a request to my backend,
and if we have a look at it todos.js,
which is that old code,
which we wrote in the previous core section,
we see that in the end here in createTodo in todos.js,
I have this code here for sending a request to the API,
for handling the response, for getting the ID
of the createdTodo, and then using that ID
to create a new todo list item in the DOM.
And therefore, generally,
I want to copy that code for sending my request,
including the try-catch code here.
I'll copy all of that and go back to app JS to my view JS
code.
And here, indeed,
I want to execute that code in this L's branch,
where we are creating a newTodo.
Now you could create a new function outside of this Vue app
object or a new method here to split your code
and to not have all the code in here,
but I will actually paste it all in here.
Now, therefore I'll leave that newTodo for the moment,
but between that and pushing it, I will add that code,
which I just copied with all that try-catch code and so on.
So that I create this response variable.
Then I try sending a request to my API, a post request,
and now we'll have to make sure that I sent the proper text
here. The todo text.
Now that of course means
that I want to use my enteredTodo text
And therefore I'll copy this enteredTodo text
and use this for the text,
which will be part of the request body.
Then here I have the headers, I catch potential errors.
Also, if my response code,
my status code of the response should not be a 200 ish code.
And then I want to continue with the response data.
Now that's actually where I will delete this newTodo or
where I will cut this newTodo up there.
And instead now,
if I go down to the bottom here after extracting
the response data, I now want to create my newTodo,
and the text should be the enteredTodo text,
but here the ID will not be some pseudo unique ID,
which I generate with help of the date.
But instead I'll use that todo ID,
which I get back from the response here.
And of course, we could also do that in one line like this,
without that extra const,
This will now add a newTodo and then I pushed this newTodo.
But since I await parsing the response data and awaiting the
response in general, this to-do will only be added.
once I have that response from the HTTP request I sent.
Therefore, now, if we save everything,
if we go back and we reload this page here,
we get this code right now, because if I opened a console,
I got an error, a wait is only valid in async functions.
So I see this placeholder because of Vue didn't become
active because I have an error in my code.
Indeed, I'm using the await keyword
and just as before in all the other parts of the course,
we have to add the async keyword in front of this
saveTodo method.
Therefore that's always the same because it's really,
really, really important to understand that with Vue.js,
you still write regular JavaScript code in the end.
So all those JavaScript rules still apply.
There are some vue, specific behaviors and features,
which you can use, but the general
JavaScript rules still apply.
Therefore now, if we saved this, that's gone.
And if I now try adding a newTodo here or be more specific
and say, learn Vue.js.
If I click save, it's added here,
I have no error here in the console and it should now be
part of my database.
Indeed, to verify that
I'll start my Mongo shell and use my second API database.
And then there, I can reach out to, todo's and call find.
And in there I have this new learn Vue.js todo,
which was added.
So that was added.
That's how we can send such a post request. Now, of course,
we also want to make sure that if we reload this page or
we visit this page for the first time that we load all the
Todos that we got.