vuejs crud Insert Update Delete operations Example and Demo

Today, We want to share with you vuejs crud Insert Update Delete operations Example and demo.
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.

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.

  
  
  
  
  




  

    

      
      
Simple Vue.js CRUD application Step By Step
    
  
  

    Outdated! Vue 2 Data implementation can be found here.
  
  

    
  

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