Insert, Update, Delete in Vue.js

Insert, Update, Delete in Vue.js

Hi, here we are going to see how insert, update, delete function will work in vue js. In previous tutorial we have seen Basic installation and simple hello world example [ Getting start with Vue.js  ]. Now will move to next step and see how we can make curd functionality using vue.js. Here we are not going to see Dynamic Curd example, Simple Static client side curd functionality.

Lets create student form.


Fields : Name, Address, DOB

My Index.html

The target Element Id : “students”

Name Field : v-model=””
Address Field : v-model=”student.address”
DOB Field : v-model=”student.dob”

Submit Button : v-on:click=”addStudent”

addStudent is a function which is called from app.js file.

Listing Students : v-for=”(student, index) in students”
By using for loop we are going to list the students.

My app.js 

Here we have predefined 3 student details which will display on page load at students array.

Inside the “methods” function we can register and call our custom functions

Inside methods function We have 3 functions called addStudent, deleteStudent, getStudent

addStudent => Based on Index we are going to Add or Update the students

deleteStudent => Based on Index value we are going to delete the Student Record.

getStudent => Based on Index we will fetch the student details from students array and fill it in student Form Fields.

insert update delete in vue js

On the time of loading we don’t have index at Form fields. When user call getStudent Function, It will fetch the student record and fill in form. On time of form submit addStudent function will check may the form has Index or Not, If the form have index It will update the record else will store the record.


Lets see how make curd functionality at server side in another tutorial.
Thanks for reading this article, If you like this article don’t forget to share and comment.