Invoice Web App - Django and Vue Tutorial Part 3 - Django Rest Framework and Vue CLI

In the third part of this video series, we'll make it possible to add clients to our web app. The web app will be sent to the server using Axios.

Todo list for part 3
-Create django app and model for clients (and update database)
-Register model with admin and add test clients
-Create a serializer file for the clients
-Create django view for getting clients (import to urls)
-Create page for showing clients
-Make it possible to view client details
-Make it possible to add clients
-Make it possible to edit a client

---

Important links

GitHub

Vue

Django

---

#codewithstein #django #djangoandvue #djangorestframework #djangovue #vue #vuejs #djangotutorial #learndjango #axios #vueaxios #djoser #djangocorsheaders

[Mostaqmahmud]

You don't need to iterate the list data two times. One is after API and another one is v-for. Good series indeed. Thanks.

[archtopo]

This tutorial is amazing! Greetings from Greece!

[dalestewart]

Another excellent tutorial implementing the functionality making it possible to add clients to our web app. The web app will be sent to the server using Axios.

[ssiiz]

I'm learning a lot, thank you very much for this serie!!

[pngashh]

I love these videos, , Thank you, you are making django easy to learn

[kubastrawa]

Hey! When i did the EditClient part, around 30:00 mark, i could edit a client and it redirected me to the Clients page, but then when i click details again it shows me many errors such as:

"Uncaught (in promise) Error: Missing required param "id""

AND

"Unhandled error during execution of setup function
at <RouterLink to= Object class="button is-light mt-4" > "

When i delete the line of code in Client.vue, the router link to EditClient, it works again perfectly, but it doesnt have the edit option.

Do you have any idea why it's like that? I even copied some of your codes from github to make sure i didn't type anything wrong. I have no idea how to fix that and noone on the internet had similar issue.
Is there any way you could help me?

[dashing]

the edit link at 29:41 returns a promise error because id is undefined - if i remove the link the error disappears

[rpdev]

Have you added the PermissionDenied check because you will remove the clients filter by user? Anyway the error message does not show in the template.

[CaliFlower]

where would getClient() be ideally located to avoid duplicating it in AddClient and EditClient?

[rpdev]

Is there a smarter way to add the username in the navbar than adding an axios get to /api/v1/users/ in the App.vue?

[rpdev]

Wouldn't be more efficient to call Client.objects.filter() when overriding get_queryset() instead of get them all with Client.objects.all() and then filter?

[mikewhalen]

I think you need to explain your actions a little more. Or show where in the django docs a lot of this is located. That would be more helpful to newer django/Python users

[ducnguyenvan]

<router-link :to="{ name: 'EditClient', params: { id: client.id }}" class="button is-light mt-4">Edit</router-link>-->
I met an error. When I add this router-link into Client page, all page is blank. I temporary fix by create a function and add
Does anyone know this issue?

Another thing, should we pass client object into EditClient component? it will be more effective
Thank you for your video. It is very awesome ^^