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

  
  
  
  
  




  

    

      
      
Vue.js 2 CRUD application
      
Ported from: Vue.js CRUD application
    
  
  

    
  

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