vuejs crud Insert Update Delete operations Example and demo

vuejs crud Insert Update Delete operations Example and demo

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.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://wzrd.in/bundle/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/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
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!.


Related FAQ

Here are some more FAQ related to this Article:

  1.   jquery validate select dropdown Example
  2.   ng-app Directive using Angular Example
  3.   Simple Vue.js 2 CRUD application
  4.   Remove Duplicate Objects from Array Jquery Example
  5.   Simple Vue js CRUD Example Tutorial From Scratch
  6.   Vue.js Simple CRUD Tutorial Example From Scratch
  7.   Laravel 6 Eloquent Joins Queries Example Tutorial
  8.   Routing with Multiple Views using Angular Example
  9.   ng-focus event Directive using Angular Example
  10.   Laravel Vue JS CRUD Example Tutorial From Scratch