diff --git a/.gitignore b/.gitignore index 6d84185..433666c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store .idea -node_modules \ No newline at end of file +node_modules +dist/ \ No newline at end of file diff --git a/README.md b/README.md index 92c826b..bce1074 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Working with HTTP in Vue.js -This repository contains the code for the HTTP section from the [Vue.js: From Beginner to Professional course](https://codingexplained.com/l/github/vue-js-github). +This repository contains the code for the HTTP section from the [Vue.js: From Beginner to Professional course](https://l.codingexplained.com/course/vuejs?src=github). ## Getting up and Running @@ -13,4 +13,4 @@ npm run dev # Build for production with minification npm run build -``` \ No newline at end of file +``` diff --git a/backend/server.js b/backend/server.js index d534285..60d089c 100644 --- a/backend/server.js +++ b/backend/server.js @@ -20,17 +20,16 @@ function deleteReview(productId, reviewId) { let product = getProduct(productId); if (product) { - let reviews = product.reviews; let index = -1; - for (let i = 0; i < reviews.length && index == -1; i++) { - if (reviews[i].id == reviewId) { + for (let i = 0; i < product.reviews.length && index == -1; i++) { + if (product.reviews[i].id == reviewId) { index = i; } } if (index != -1) { - product.reviews = reviews.splice(index, 1); + product.reviews.splice(index, 1); return true; } } diff --git a/package.json b/package.json index 53c6b11..2966cce 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "cors": "^2.8.1", "express": "^4.15.2", "vue": "^2.2.2", + "vue-resource": "^1.3.4", "vue-router": "^2.3.0" }, "devDependencies": { diff --git a/src/ProductList.vue b/src/ProductList.vue index abf85d8..b490c6b 100644 --- a/src/ProductList.vue +++ b/src/ProductList.vue @@ -41,6 +41,14 @@ products: [] }; }, + created() { + this.$http.get('http://localhost:3000/products') + .then( + response => response.json(), + response => alert("error") + ) + .then(products => this.products = products); + }, methods: { addProductToCart(product, quantity) { eventBus.$emit('addItemToCart', { diff --git a/src/ViewProduct.vue b/src/ViewProduct.vue index a1b41b1..da54a90 100644 --- a/src/ViewProduct.vue +++ b/src/ViewProduct.vue @@ -43,15 +43,25 @@ }; }, created() { - this.product = this.getProduct(this.productId); + this.getProduct(this.productId) + .then(product => this.product = product); }, beforeRouteUpdate(to, from, next) { - this.product = this.getProduct(to.params.productId); + this.getProduct(to.params.productId) + .then(product => this.product = product); + next(); }, methods: { getProduct(productId) { - + return this.$http.get('http://localhost:3000/products/{productId}', { + params: { + productId: productId + } + }).then( + response => response.json(), + response => alert("Could not retrieve product!") + ); }, goBack() { this.$router.history.go(-1); diff --git a/src/main.js b/src/main.js index 3fd74d5..d290cb3 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import Vue from 'vue' import App from './App' import VueRouter from 'vue-router'; +import VueResource from 'vue-resource'; import { routes } from './routes'; import 'bootstrap/dist/css/bootstrap.css'; @@ -51,6 +52,8 @@ router.beforeEach((to, from, next) => { next(); }); +Vue.use(VueResource); + /* eslint-disable no-new */ new Vue({ el: '#app',