Learn How To Make CRUD Pages With Laravel And Vuejs

Learn How To Make CRUD Pages With Laravel And Vuejs Part 2

In this part of this series we continue completing the CRUD operations and we will finish it with Create and update posts.



Series Topics:


In the previous part we setup the project and setup all the required assets, added the listing page, sorting, search, and delete. In this part we will cover (C) create and (U) update and view operations.


Creating Posts

Open assets/js/components/Crud/CreatePost.vue and add the below contents:

In this code we added the create form which has three fields (title, body, photo) and we used the two way model binding to bind the fields to the values attached to the store and defined the values as a computed property like this:

Here the title will be updated and read from the vuex store using the get() and set() functions, the get() will be called to retrieve data and set() will be called on change the input.


Then we added a method to submit the form, at first the method validates the inputs and in case there is an error it will be rendered in top of the form using v-for like this:

On successful submission we send an ajax request with form fields so we constructed a formData object and fill it with the data like this:

After the data saved successfully we return back to the listing page using $router.push({path: ‘/list’})

Important note: sometimes laravel blocks post requests through ajax and shows error 419 and this because cross domain to solve this install laravel package called laravel cors:

Updating Posts

Open assets/js/components/Crud/EditPost.vue and add the below contents:

The update form as the same as the create form except that we need to fetch the post data on first page load and populate them with form fields so in the mounted() hook we add this code:

The form values gets automatically binded as we already update the store and this is the advantage of using vuex store which acts as a central repository of data.


Viewing Posts

Open assets/js/components/Crud/ViewPost.vue and add the below contents:

Here we are doing the same scenario we fetch the post data using axios and binded them a variable that we define into data() method.

Share this: