Simple Vue.js 2 CRUD application
Today, We want to share with you Simple Vue.js 2 CRUD application.
In this post we will show you Build a Basic CRUD App with Vue.js and Node, hear for Creating a simple CRUD application with Laravel 5 and Vue.js 2 we will give you demo and example for implement.
In this post, we will learn about Basic CRUD Operations Using Vue.js Example with an example.
index.html
simple source code for DOM Html elements
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue.js CRUD application</title>
<meta name="postDesc" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Vue.js 2 CRUD application</h1>
<p>Ported from: <a href="https://codepen.io/-a/pen/amOYGp">Vue.js CRUD application</a></p>
</div>
</header>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="post-list">
<div>
<div class="actions">
<router-link class="btn btn-default" v-bind:to="{path: '/add-post'}">
<span class="glyphicon glyphicon-plus"></span>
Add post
</router-link>
</div>
<div class="filters row">
<div class="pakainfo form-group grp col-sm-3">
<label for="search-element">Post name</label>
<input v-model="searchKey" class="pakainfo form-control gid" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="post in filteredPosts">
<td>
<router-link v-bind:to="{name: 'post', params: {post_id: post.id}}">{{ post.name }}</router-link>
</td>
<td>{{ post.postDesc }}</td>
<td>
{{ post.pview }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'post-edit', params: {post_id: post.id}}">Edit</router-link>
<router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'post-delete', params: {post_id: post.id}}">Remove</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<template id="add-post">
<div>
<h2>Add new post</h2>
<form v-on:submit="createPost">
<div class="pakainfo form-group grp">
<label for="add-name">Name</label>
<input class="pakainfo form-control gid" id="add-name" v-model="post.name" required/>
</div>
<div class="pakainfo form-group grp">
<label for="add-postDesc">Description</label>
<textarea class="pakainfo form-control gid" id="add-postDesc" rows="10" v-model="post.postDesc"></textarea>
</div>
<div class="pakainfo form-group grp">
<label for="add-pview">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="pakainfo form-control gid" id="add-pview" v-model="post.pview"/>
</div>
<button type="submit" class="btn btn-primary">Create</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="post">
<div>
<h2>{{ post.name }}</h2>
<b>Description: </b>
<div>{{ post.postDesc }}</div>
<b>Price:</b>
<div>{{ post.pview }}<span class="glyphicon glyphicon-euro"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<router-link v-bind:to="'/'">Back to post list</router-link>
</div>
</template>
<template id="post-edit">
<div>
<h2>Edit post</h2>
<form v-on:submit="updatePost">
<div class="pakainfo form-group grp">
<label for="edit-name">Name</label>
<input class="pakainfo form-control gid" id="edit-name" v-model="post.name" required/>
</div>
<div class="pakainfo form-group grp">
<label for="edit-postDesc">Description</label>
<textarea class="pakainfo form-control gid" id="edit-postDesc" rows="3" v-model="post.postDesc"></textarea>
</div>
<div class="pakainfo form-group grp">
<label for="edit-pview">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="pakainfo form-control gid" id="edit-pview" v-model="post.pview"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="post-delete">
<div>
<h2>Remove post {{ post.name }}</h2>
<form v-on:submit="deletePost">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Remove</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
</body>
</html>
index.js
all the included javascript source code
var posts = [
{id: 1, name: 'Angular', postDesc: 'happy bday wala janamdivash mubark ho apko', pview: 100},
{id: 2, name: 'Ember', postDesc: 'I love you my sweet hart.', pview: 100},
{id: 3, name: 'React', postDesc: 'my best and dear sweet hart i miss u.', pview: 100}
];
function findPost (postId) {
return posts[findPostKey(postId)];
};
function findPostKey (postId) {
for (var key = 0; key < posts.length; key++) {
if (posts[key].id == postId) {
return key;
}
}
};
var List = Vue.extend({
template: '#post-list',
data: function () {
return {posts: posts, searchKey: ''};
},
computed: {
filteredPosts: function () {
return this.posts.filter(function (post) {
return this.searchKey=='' || post.name.indexOf(this.searchKey) !== -1;
},this);
}
}
});
var Post = Vue.extend({
template: '#post',
data: function () {
return {post: findPost(this.$route.params.post_id)};
}
});
var PostEdit = Vue.extend({
template: '#post-edit',
data: function () {
return {post: findPost(this.$route.params.post_id)};
},
methods: {
updatePost: function () {
var post = this.post;
posts[findPostKey(post.id)] = {
id: post.id,
name: post.name,
postDesc: post.postDesc,
pview: post.pview
};
router.push('/');
}
}
});
var postRemove = Vue.extend({
template: '#post-delete',
data: function () {
return {post: findPost(this.$route.params.post_id)};
},
methods: {
deletePost: function () {
posts.splice(findPostKey(this.$route.params.post_id), 1);
router.push('/');
}
}
});
var AddPost = Vue.extend({
template: '#add-post',
data: function () {
return {post: {name: '', postDesc: '', pview: ''}}
},
methods: {
createPost: function() {
var post = this.post;
posts.push({
id: Math.random().toString().split('.')[1],
name: post.name,
postDesc: post.postDesc,
pview: post.pview
});
router.push('/');
}
}
});
var router = new VueRouter({routes:[
{ path: '/', component: List},
{ path: '/post/:post_id', component: Post, name: 'post'},
{ path: '/add-post', component: AddPost},
{ path: '/post/:post_id/edit', component: PostEdit, name: 'post-edit'},
{ path: '/post/:post_id/delete', component: postRemove, name: 'post-delete'}
]});
app = new Vue({
router:router
}).$mount('#app')
style.css
cusome css available
.logo {
width: 78px;
float: left;
margin-right: 16px;
}
.pakainfo form-group grp {
max-width: 600px;
}
.actions {
padding: 11px 0;
}
.glyphicon-euro {
font-size: 13px;
}
We hope you get an idea about Simple Vue.js 2 CRUD application
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.