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.

[php]

Add invoice

invoice name

Name	Description	Price	Actions
{{ invoice.name }}	{{ invoice.description }}	{{ invoice.price }}	Edit Delete

Add new invoice

Name

Description

Price,

Create
Cancel

{{ invoice.name }}

Description:

{{ invoice.description }}

Price:

{{ invoice.price }}

Back to invoice list

Edit invoice

Name

Description

Price,

Save
Cancel

Delete invoice {{ invoice.name }}

The action cannot be undone.

READ :  VueJS MVC Application Architecture - VueJS model view controller example

Delete
Cancel

http://vue.min.js
http://vue-router.min.js

http://js/index.js

[/php]

index.js

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

[php]
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: '’
});
[/php]

Demo Example