vuejs insert update delete CRUD application

Rate this post

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

READ :  Vuejs Expressions – Numbers Strings Objects Array eval using Vuejs

index.html : Vue.js CRUD application

First of all to the add vuejs script.

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

READ :  Vue Restful API and axios API Example - Vue js rest api authentication

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

READ :  Laravel 6 Logs Errors and Exception handling Example From Scratch

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

Leave a Reply

Your email address will not be published.