CRUD operation using VUEJS
In this tutorial we have completed CRUD operation using VueJS . For this tutorial we have first created html code for displaying student list , Create student , Edit student and Delete student. We have also created VueJS code for CRUD operation. We have used VueJS for creating VueJS component and VueJS for CRUD operation. We have used Students Array for storing Data . To understand below code you need to first know about HTML , CSS AND VUEJS. For learning all three you need to visit following link : https://w3schools.com
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VueJS CRUD operation</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<style> .container{ margin-top: 100px; } </style></head><!--define vuejs app in body tag --><body > <div class="container" v-cloak id="app"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Student List</h3> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Roll Number</th> <th>Name</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody> <tr v-for="student in students"> <td>{{student.rollnumber}}</td> <td>{{student.name}}</td> <td>{{student.address}}</td> <td> <button class="btn btn-primary" @click="editStudent(student)">Edit</button> <button class="btn btn-danger" @click="deleteStudent(student)">Delete</button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container" v-if="edit"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Edit Student</h3> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <form @submit.prevent="update "> <div class="form-group"> <label for="rollnumber">Roll Number</label> <input type="text" class="form-control" v-model="editStudent.rollnumber"> </div> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" v-model="editStudent.name"> </div> <div class="form-group"> <label for="address">Address</label> <input type="text" class="form-control" v-model="editStudent.address"> </div> <button type="submit" class="btn btn-primary">Update</button> </form> </div> </div> </div> </div> </div> </div> </div> <div class="container" v-if="create"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header"> <h3>Create Student</h3> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <form @submit.prevent="createStudent "> <div class="form-group"> <label for="rollnumber">Roll Number</label> <input type="text" class="form-control" v-model="newStudent.rollnumber"> </div> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" v-model="newStudent.name"> </div> <div class="form-group"> <label for="address">Address</label> <input type="text" class="form-control" v-model="newStudent.address"> </div> <button type="submit" class="btn btn-primary">Create</button> </form> </div> </div> </div> </div> </div> </div> </div> <script> // write vueJS code such that it create update list and delete student object in array not through RESTAPI API
var app = new Vue({ el: '#app', data: { students: [], edit: false, create: false, newStudent: { rollnumber: '', name: '', address: '' }, editStudent: { rollnumber: '', name: '', address: '' } }, methods: { createStudent: function(){ var self = this; self.newStudent.rollnumber = self.students.push(self.newStudent); self.newStudent = { rollnumber: '', name: '', address: '' }; self.create = false; }, editStudent: function(student){ this.editStudent = student; this.edit = true; }, update: function(){ var self = this; self.students.splice(self.students.indexOf(self.editStudent), 1, self.editStudent); self.editStudent = { rollnumber: '', name: '', address: '' }; self.edit = false; }, deleteStudent: function(student){ var self = this; self.students.splice(self.students.indexOf(student), 1); } }, mounted: function(){ var self = this; self.newStudent.rollnumber = "New" self.newStudent.name = "New" self.newStudent.address = "New"
self.students.push(this.newStudent); self.newStudent = { rollnumber: '', name: '', address: '' }; } });
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </body>
</html>
Leave a Comment
No Comments Yet