VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3

0

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

In our last two articles, we learned the create and fetch the contact details in VDOM stack application. In this article, we are going to implement the remaining edit and delete part of this CRUD series.

VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3
VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3

Add edit contact concept in contact.ts in model folder


Create editContact function in controller


Add edit contact routes:


Now it’s time to work on the UI part of editComponent.


Update Contact - VDOM stack
Update Contact – VDOM stack

Now it’s time to update the contact. Add below code in contact.ts in model.


Now add update contact in controller.


Add patch routes in contact.ts inside routes folder


Next thing is to add update method in EditComponent.vue


Now your update section of this stack is completed. Now it’s time to complete our last delete functionality in our application.

Create deleteContact in the models>contact.ts


After model, add deleteContact method in controller of contacts.ts


Now enable the delete link in routes


At last complete the delete button in the ContactComponent.vue


Wait! Have you call the delete service? No, then how your delete will work. Let me finish the last piece of code.

Add deleteContact method in ContactComponet.vue


Video of this code:

As I told you, source code of this series.

0
Summary
VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3
Article Name
VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 3
Description
Create and fetch the contact details in VDOM stack application. In this article, we are going to implement the remaining edit and delete part.
Author
Publisher Name
Das JS
Publisher Logo