Laravel VueJS 2 CRUD Tutorial Part 4 (Delete Data From DataBase)

At Last, finally we are in last stage of our laravel vuejs crud tutorial. In last post we have written about how to update records into database using vuejs and laravel.

If you are new to this article please visit our last written post at Laravel VueJS 2 Crud Application Part 3 or may be you can start from Setting Up Laravel and VueJS 2 Project. This will help you better understand on what this article is about.

Without waiting much time lets finish our final part of our laravel vuejs 2 crud tutorial series.

Lets get started

Till now our directory structure looks like this.

To delete the records from the database we just need to follow these simple steps below.

1. Add @click event which trigger a function and pass category id to it.
2. Create new deleteCategory() function inside ViewCategory component methods section.
3. Create routes in api.php and delete function inside CategoryController.php in laravel.
4. Write a javascript code to remove the record which was pressed delete.

Lets add click event to the buttons. Open up ViewCategory.vue and changes this line.

to this

Add new function named deleteCategory() just after viewCategories() function.

Also,

Change this line :

to this :

Now we have finished our task in VueJS. Time to configure routes and controller in laravel.

Go to routes/api.php and add this line.

Go to CategoryController.php inside app/Http/Controllers and add this function.

Finally hit php artisan serve and npm run watch in order to test the application.

Good going,  you have finally completed laravel vuejs crud tutorial series. If you want to take a look at the sample application we build during our series, you can download them by clicking this link.

If you have any problem, you can mention via comments or contact us via contact page.