├── .gitignore ├── README.md ├── index.html ├── package.json └── src ├── css └── style.css └── js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Vue.js v2 CRUD sample application 2 | 3 | Uses vue.js v2.0 and vue-router v2.0 4 | 5 | - Forked from [this demo](http://codepen.io/-a/pen/amOYGp) using vue.js 1.x 6 | - [Demo on codepen](http://codepen.io/shershen08/pen/xROOxw) 7 | 8 | ### Usage 9 | - clone or download zip of this repo 10 | - `cd` to the upacked folder 11 | - run `npm install` 12 | - run http server of your choice (eg [whs](https://github.com/gstack/watch-http-server) or [SimpleHTTPServer](https://docs.python.org/2/library/simplehttpserver.html)) 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.js v2.0 - CRUD application 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 |

Vue.js v2 CRUD

21 |
22 |
23 |
24 |
25 | 26 | 68 | 69 | 90 | 91 | 103 | 104 | 125 | 126 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-v2-crud-application", 3 | "version": "0.1.0", 4 | "description": "vue.js v1 (http://codepen.io/-a/pen/amOYGp) to v2 (http://codepen.io/shershen08/pen/xROOxw)", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "MKuznetcov", 10 | "license": "ISC", 11 | "dependencies": { 12 | "jquery": "^3.1.1", 13 | "lodash": "^4.16.6", 14 | "vue": "^2.0.0", 15 | "vue-router": "^2.0.0", 16 | "vue-server-renderer": "^2.0.5" 17 | }, 18 | "devDependencies" : { 19 | "vue-migration-helper": "^1.1.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | width: 50px; 3 | float: left; 4 | margin-right: 15px; 5 | } 6 | 7 | .form-group { 8 | max-width: 500px; 9 | } 10 | 11 | .actions { 12 | padding: 10px 0; 13 | } 14 | 15 | .glyphicon-euro { 16 | font-size: 12px; 17 | } 18 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | var products = [ 2 | {id: 1, name: 'Angular', description: 'Superheroic JavaScript MVW Framework.', price: 100}, 3 | {id: 2, name: 'Ember', description: 'A framework for creating ambitious web applications.', price: 100}, 4 | {id: 3, name: 'React', description: 'A JavaScript Library for building user interfaces.', price: 100} 5 | ]; 6 | 7 | function findProduct (productId) { 8 | return products[findProductKey(productId)]; 9 | }; 10 | 11 | function findProductKey (productId) { 12 | for (var key = 0; key < products.length; key++) { 13 | if (products[key].id == productId) { 14 | return key; 15 | } 16 | } 17 | }; 18 | 19 | var List = Vue.extend({ 20 | template: '#product-list', 21 | data: function () { 22 | return {products: products, searchKey: ''}; 23 | }, 24 | computed : { 25 | filteredProducts: function () { 26 | var self = this; 27 | console.log() 28 | return self.products.filter(function (product) { 29 | return product.name.indexOf(self.searchKey) !== -1 30 | }) 31 | } 32 | } 33 | }); 34 | 35 | var Product = Vue.extend({ 36 | template: '#product', 37 | data: function () { 38 | return {product: findProduct(this.$route.params.product_id)}; 39 | } 40 | }); 41 | 42 | var ProductEdit = Vue.extend({ 43 | template: '#product-edit', 44 | data: function () { 45 | return {product: findProduct(this.$route.params.product_id)}; 46 | }, 47 | methods: { 48 | updateProduct: function () { 49 | var product = this.product; 50 | products[findProductKey(product.id)] = { 51 | id: product.id, 52 | name: product.name, 53 | description: product.description, 54 | price: product.price 55 | }; 56 | router.push('/'); 57 | } 58 | } 59 | }); 60 | 61 | var ProductDelete = Vue.extend({ 62 | template: '#product-delete', 63 | data: function () { 64 | return {product: findProduct(this.$route.params.product_id)}; 65 | }, 66 | methods: { 67 | deleteProduct: function () { 68 | products.splice(findProductKey(this.$route.params.product_id), 1); 69 | router.push('/'); 70 | } 71 | } 72 | }); 73 | 74 | var AddProduct = Vue.extend({ 75 | template: '#add-product', 76 | data: function () { 77 | return {product: {name: '', description: '', price: ''} 78 | } 79 | }, 80 | methods: { 81 | createProduct: function() { 82 | var product = this.product; 83 | products.push({ 84 | id: Math.random().toString().split('.')[1], 85 | name: product.name, 86 | description: product.description, 87 | price: product.price 88 | }); 89 | router.push('/'); 90 | } 91 | } 92 | }); 93 | 94 | var router = new VueRouter({ 95 | routes: [{path: '/', component: List}, 96 | {path: '/product/:product_id', component: Product, name: 'product'}, 97 | {path: '/add-product', component: AddProduct}, 98 | {path: '/product/:product_id/edit', component: ProductEdit, name: 'product-edit'}, 99 | {path: '/product/:product_id/delete', component: ProductDelete, name: 'product-delete'} 100 | ]}); 101 | 102 | new Vue({ 103 | el: '#app', 104 | router: router, 105 | template: '' 106 | }); 107 | --------------------------------------------------------------------------------