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.

READ :  Vuejs Introduction Architecture Advantages - VueJs Examples

[php]

Vue.js v2 CRUD application step by step


Add invoice

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

Add new invoice



Cancel

{{ invoice.name }}

Description:

{{ invoice.description }}

Price:

{{ invoice.price }}


Back to invoice list

Edit invoice



Cancel

Delete invoice {{ invoice.name }}

The action cannot be undone.


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}
];

READ :  Best Vuejs Tutorials beginner -learn Vuejs step by step

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('/');
}
}
});

READ :  AngularJS Nested ng-if parent scope Examples

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

Leave a Reply

Your email address will not be published. Required fields are marked *