Paka Information

vuejs crud Insert Update Delete operations Example and demo

958 0

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/vue-barcode@1.0.6.js"></script>
<script src="https://unpkg.com/vue@2.0.3/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.

Also Read :  How to create a logfile in PHP

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.

Also Read :  Top 10 Advanced MySQL Interview Questions Answers

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

Leave A Reply

Your email address will not be published.