Services

CRUD operation using VUEJS

male avatar

dimple

Published On : 2022-07-16
blog header

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

Comments

No Comments Yet

About Us

We are Saify technologies a software development company located in india . Who develops custom Web , Mobile applications. We are specialized in Artificial intelligence technology. We have completed many projects on ecommerce with many different technology stacks which includes JAVA, Flutter , PHP, Python , C#,Swift and many more