X
    Categories: Vue.js

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <!-- navigation bar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand"><i class="glyphicon glyphicon-menu-down"></i> Welcome to Vue World</a>
        </div>
    </nav>

    <div class="container" id="students">

        <!-- add an student form -->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Add Student</h3>
                </div>
                <div class="panel-body">
                    <div class="panel-heading">
                        <h3>Add Student</h3>
                    </div>
                    <div class="panel-body">
                        <input class="form-control" type = "hidden" placeholder="Student Id" v-model="student.index">
                        <div class="form-group">
                            <input class="form-control" placeholder="Student Name" v-model="student.name">
                        </div>

                        <div class="form-group">
                            <textarea class="form-control" placeholder="Student Address" v-model="student.address"></textarea>
                        </div>

                        <div class="form-group">
                            <input type="date" class="form-control" placeholder="DOB" v-model="student.dob">
                        </div>

                        <button class="btn btn-primary" v-on:click="addStudent">Submit</button>

                    </div>

                </div>

            </div>

        </div>

        <!-- show the students -->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Student Lists</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">

                        <a href="#" class="list-group-item" v->
The target Element Id : "students"
Name Field : v-model="student.name" 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->My app.js 
var students  = [
  			{
  				id : 1,
  				name : 'Ashok Kumar',
  				address : '1, India',
  				dob : '2015-10-01'
  			},
  			{
  				id : 2,
  				name : 'Ashwin Kumar',
  				address : '2, India',
  				dob : '2015-10-02'
  			},
  			{
  				id : 3,
  				name : 'Balaji',
  				address : '3, India',
  				dob : '2015-10-01'
  			}
  		];

// app.js
new Vue({

  // We want to target the div with an id of 'students'
  el: '#students',

  // Here we can register any values or collections that hold data
  // for the application
  data: {

  	student : {  index : '', name : '', address : '', dob : '' },
  	students : students
  },


  // Methods we want to use in our application are registered here
  methods: {

  	addStudent : function() {
  		if(this.student.name && (this.student.id == '' || this.student.id == undefined ) ) {
        this.student.id = this.students.length + 1;
  			this.students.push(this.student);
  			this.student = { id: '', name: '', address: '', dob: '', index : '' };
  		} else if(this.student.id != '' && this.student.id != undefined) {
          this.students.splice(this.student.index, 1, this.student); 
          this.student = { id: '', name: '', address: '', dob: '', index : '' };
      }
  	},

  	deleteStudent: function(index) {
		  if(confirm("Are you sure you want to delete this student?")) {
		    // splice is a Vue convenience method similar to splice
        
		     this.students.splice(index, 1); // this.students.splice(index);   
         this.student = { id: '', name: '', address: '', dob: '', index : '' };     
		  }
		},

    getStudent: function(index) {
        var studentDetail =  this.students[index]; // this.students.splice(index);    
        this.student.name = studentDetail.name;
        this.student.address = studentDetail.address;
        this.student.dob = studentDetail.dob;
        this.student.id = studentDetail.id;
        this.student.index = index;
    }

  }
});

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.

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.
Thanks!.

Marimuthu: