vuejs insert update delete CRUD application

vuejs insert update delete CRUD application

Today, We want to share with you vuejs insert update delete CRUD application.
In this post we will show you vuejs insert update delete Example – Vue.js CRUD application, hear for Laravel 5.5 – VueJS 2.0 CRUD Operations we will give you demo and example for implement.
In this post, we will learn about Vue.js CRUD application with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.vuejs insert update delete Example – Vue.js CRUD application

index.html : Vue.js CRUD application

First of all to the add vuejs script.

  
  <title>Vue.js v2 CRUD application step by step</title>
  
  





<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>vuejs insert update delete using php mysql : Vue.js v2 CRUD</h1>
    </div>
  </header>
  
</div>


  <section>
  <div class="actions">
    
      <span class="glyphicon glyphicon-plus"></span>
      Add invoice
    
  </div>
  <div class="filters row">
    <div class="form-group col-sm-3">
      <label for="search-element">invoice name</label>
      
    </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>
      <td>
        {{ invoice.name }}
      </td>
      <td>{{ invoice.description }}</td>
      <td>
        {{ invoice.price }}
        <span class="glyphicon glyphicon-euro"></span>
      </td>
      <td>
        Edit
        Delete
      </td>
    </tr>
    </tbody>
  </table>
  </section>



    <section>
  <h2>Add new invoice</h2>
  <form>
    <div class="form-group">
      <label for="add-name">Name</label>
      
    </div>
    <div class="form-group">
      <label for="add-description">Description</label>
      <textarea class="form-control" id="add-description" rows="10"></textarea>
    </div>
    <div class="form-group">
      <label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
      
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
     Cancel
  </form>
</section>



    <section>
  <h2>{{ invoice.name }}</h2>
  <b>Description: </b>
  <div>{{ invoice.description }}</div>
  <b>Price:</b>
  <div>{{ invoice.price }}<span class="glyphicon glyphicon-euro"></span></div>
  <br />
  <span class="glyphicon glyphicon-arrow-left"></span>
  Back to invoice list
</section>



    <section>
  <h2>Edit invoice</h2>
  <form>
    <div class="form-group">
      <label for="edit-name">Name</label>
      
    </div>
    <div class="form-group">
      <label for="edit-description">Description</label>
      <textarea class="form-control" id="edit-description" rows="3"></textarea>
    </div>
    <div class="form-group">
      <label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
      
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    Cancel
  </form>
</section>



    <section>
  <h2>Delete invoice {{ invoice.name }}</h2>
  <form>
    <p>The action cannot be undone.</p>
    <button type="submit" class="btn btn-danger">Delete</button>
    Cancel
  </form>
</section>

  <a href="http://vue.min.js">http://vue.min.js</a>
<a href="http://vue-router.min.js">http://vue-router.min.js</a>

    <a href="http://js/index.js">http://js/index.js</a>

index.js

here all the dynemically json add data means push data and remove data in vuejs example.

var invoices = [
  {id: 1, name: 'infinityknow', description: 'Superheroic JavaScript MVW Framework.', price: 100},
  {id: 2, name: 'angularjs', description: 'A framework for creating ambitious web applications.', price: 100},
  {id: 3, name: 'vuejs', description: 'A JavaScript Library for building user interfaces.', price: 100}
];

function findinvoice (invoiceId) {
  return invoices[findinvoiceKey(invoiceId)];
};

function findinvoiceKey (invoiceId) {
  for (var key = 0; key < invoices.length; key++) {
    if (invoices[key].id == invoiceId) {
      return key;
    }
  }
};

var List = Vue.extend({
  template: '#invoice-list',
  data: function () {
    return {invoices: invoices, searchKey: ''};
  },
  computed : {
    filteredinvoices: function () {
    var self = this;
    console.log()
    return self.invoices.filter(function (invoice) {
      return invoice.name.indexOf(self.searchKey) !== -1
    })
  }
}
});

var invoice = Vue.extend({
  template: '#invoice',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  }
});

var invoiceEdit = Vue.extend({
  template: '#invoice-edit',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  },
  methods: {
    updateinvoice: function () {
      var invoice = this.invoice;
      invoices[findinvoiceKey(invoice.id)] = {
        id: invoice.id,
        name: invoice.name,
        description: invoice.description,
        price: invoice.price
      };
      router.push('/');
    }
  }
});

var invoiceDelete = Vue.extend({
  template: '#invoice-delete',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  },
  methods: {
    deleteinvoice: function () {
      invoices.splice(findinvoiceKey(this.$route.params.invoice_id), 1);
      router.push('/');
    }
  }
});

var Addinvoice = Vue.extend({
  template: '#invoice-add',
  data: function () {
    return {invoice: {name: '', description: '', price: ''}
    }
  },
  methods: {
    createinvoice: function() {
      var invoice = this.invoice;
      invoices.push({
        id: Math.random().toString().split('.')[1],
        name: invoice.name,
        description: invoice.description,
        price: invoice.price
      });
      router.push('/');
    }
  }
});

var router = new VueRouter({
  routes: [{path: '/', component: List},
    {path: '/invoice/:invoice_id', component: invoice, name: 'invoice'},
    {path: '/invoice-add', component: Addinvoice},
    {path: '/invoice/:invoice_id/edit', component: invoiceEdit, name: 'invoice-edit'},
  {path:   '/invoice/:invoice_id/delete', component: invoiceDelete, name: 'invoice-delete'}
]});

new Vue({
  el: '#app',
  router: router,
  template: ''
});

Demo Example