Home » Simple Vue.js 2 CRUD application

Simple Vue.js 2 CRUD application

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

Read Also:  Polymorphism in PHP Object-oriented programming Examples

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

Read Also:  Ng Events using Angular Example with demo

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

Read Also:  Vuejs Double Click to inline editing vue Grid Component

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Vue 2.0 Hello World Step By Step
  2. Read Also:  Vue.js Simple CRUD Tutorial Example From Scratch
  3. Read Also:  Laravel get last Eloquent print query
  4. Read Also:  Laravel whereRaw havingRaw and orderByRaw Example
  5. Read Also:  vuejs crud Insert Update Delete operations Example and demo
  6. Read Also:  Export Json Array to CSV using php Example
  7. Read Also:  Simple Vue 2.0 Hello World Example
  8. Read Also:  Advanced jquery Expert Tips for Developers
  9. Read Also:  Convert Array To Object With PHP
  10. Read Also:  Simple Vuejs Currency Converter Example

Leave a Comment

Your email address will not be published. Required fields are marked *