Vue.js CRUD with Insert, Update, and Delete Operations
In this post we will show you vuejs CRUD operations demo example, hear for Simple VueJs 2.0 CRUD Operations Application we will give you demo and example for implement.
In this post, we will learn about vuejs insert update delete Example – vuejs crud example with an example.
Include CDN
We have used Some CDN for Bootstrap and Vue JS so First You need Online internet connection for them to step by step work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://wzrd.in/bundle/vue-barcode@1.0.6.js"></script>
<script src="https://unpkg.com/vue@2.0.3/dist/vue.min.js"></script>index.html(HTML Markup Languages)
Simple Main index file Data Contains for Vue.js CRUD application.This is our index.html file that Data contains our sample Vue Barcode that we are going to vuejs crud Insert Update Delete operations Example and demo with component.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Simple Vue.js CRUD application Step By Step</title>
<meta name="information" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="pakainfo container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Simple Vue.js CRUD application Step By Step</h1>
</div>
</header>
<div class="alert alert-warning">
<strong>Outdated!</strong> Vue 2 Data implementation can be found <a href="https://codepen.io/mevdschee/pen/BpbEbj">here</a>.
</div>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="student-list">
<div class="actions">
<a class="btn btn-default" v-link="{path: '/add-student'}">
<span class="glyphicon glyphicon-plus"></span>
Add student
</a>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">Student name</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Information</th>
<th>Age</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students | filterBy searchKey in 'name'">
<td>
<a v-link="{name: 'student', params: {student_id: student.id}}">{{ student.name }}</a>
</td>
<td>{{ student.information }}</td>
<td>
{{ student.age }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<a class="btn btn-warning btn-xs" v-link="{name: 'student-edit', params: {student_id: student.id}}">Edit</a>
<a class="btn btn-danger btn-xs" v-link="{name: 'student-delete', params: {student_id: student.id}}">Delete</a>
</td>
</tr>
</tbody>
</table>
</template>
<template id="add-student">
<h2>Add new student</h2>
<form v-on:submit="addStudent">
<div class="form-group">
<label for="add-name">Name</label>
<input class="form-control" id="add-name" v-model="student.name" required/>
</div>
<div class="form-group">
<label for="add-information">Information</label>
<textarea class="form-control" id="add-information" rows="10" v-model="student.information"></textarea>
</div>
<div class="form-group">
<label for="add-age">Age, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-age" v-model="student.age"/>
</div>
<button type="submit" class="btn btn-success">Create</button>
<a v-link="'/'" class="btn btn-default">Cancel</a>
</form>
</template>
<template id="student">
<h2>{{ student.name }}</h2>
<b>Information: </b>
<div>{{ student.information }}</div>
<b>Age:</b>
<div>{{ student.age }}<span class="glyphicon glyphicon-euro"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<a v-link="'/'">Backt to student list</a>
</template>
<template id="student-edit">
<h2>Edit student</h2>
<form v-on:submit="updateStudent">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="student.name" required/>
</div>
<div class="form-group">
<label for="edit-information">Information</label>
<textarea class="form-control" id="edit-information" rows="3" v-model="student.information"></textarea>
</div>
<div class="form-group">
<label for="edit-age">Age, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="edit-age" v-model="student.age"/>
</div>
<button type="submit" class="btn btn-success">Save</button>
<a v-link="'/'" class="btn btn-default">Cancel</a>
</form>
</template>
<template id="student-delete">
<h2>Delete student {{ student.name }}</h2>
<form v-on:submit="removeStudent">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Delete</button>
<a v-link="'/'" class="btn btn-default">Cancel</a>
</form>
</template>
</body>
</html>index.js
This contains our index.js scripts.
var students = [
{id: 1, name: 'Jaydeep', information: 'Jaydeep Gondaliya is an Indian computer programmer and Internet Master.', age: 100},
{id: 2, name: 'Krunal', information: 'Krunal Sisodiya is an Indian Master business Management', age: 100},
{id: 3, name: 'Ankit', information: 'Ankit Kathiriya is a SAP ABAP Live24u.com Consultant at VC Best ERP Lives in Rajkot.', age: 100}
];
function findStudent (productId) {
return students[findStudentKey(productId)];
};
function findStudentKey (productId) {
for (var key = 0; key < students.length; key++) {
if (students[key].id == productId) {
return key;
}
}
};
var List = Vue.extend({
template: '#student-list',
data: function () {
return {students: students, searchKey: ''};
}
});
var Student = Vue.extend({
template: '#student',
data: function () {
return {student: findStudent(this.$route.params.student_id)};
}
});
var StudentEdit = Vue.extend({
template: '#student-edit',
data: function () {
return {student: findStudent(this.$route.params.student_id)};
},
methods: {
updateStudent: function () {
var student = this.$get('student');
students[findStudentKey(student.id)] = {
id: student.id,
name: student.name,
information: student.information,
age: student.age
};
router.go('/');
}
}
});
var StudentDelete = Vue.extend({
template: '#student-delete',
data: function () {
return {student: findStudent(this.$route.params.student_id)};
},
methods: {
removeStudent: function () {
students.splice(findStudentKey(this.$route.params.student_id), 1);
router.go('/');
}
}
});
var AddStudent = Vue.extend({
template: '#add-student',
data: function () {
return {student: {name: '', information: '', age: ''}
}
},
methods: {
addStudent: function() {
var student = this.$get('student');
students.push({
id: Math.random().toString().split('.')[1],
name: student.name,
information: student.information,
age: student.age
});
router.go('/');
}
}
});
var router = new VueRouter();
router.map({
'/': {component: List},
'/student/:student_id': {component: Student, name: 'student'},
'/add-student': {component: AddStudent},
'/student/:student_id/edit': {component: StudentEdit, name: 'student-edit'},
'/student/:student_id/delete': {component: StudentDelete, name: 'student-delete'}
})
.start(Vue.extend({}), '#app');Style.css
It data contains of the Custom CSS styling.
.logo {
width: 55px;
float: left;
margin-right: 14px;
}
.form-group {
max-width: 600px;
}
.actions {
padding: 11px 0;
}
.glyphicon-euro {
font-size: 13px;
}Here All Source Code and Example Download For “VueJS CRUD (Create Read Update Delete) Operation” – Basic CRUD Operations Using VueJS
We hope you get an idea about vuejs insert update delete Example – vuejs crud example
- This blog post was originally published at: https://www.pakainfo.com
1.00 GEEK