From 33b833ea689be5c76fad7b288b04e00c4f24462e Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 24 Jul 2021 21:31:04 +0200
Subject: Product page show single product details.
---
client/src/views/Product.vue | 41 ++++++++++++++++++++++++++++++++---------
1 file changed, 32 insertions(+), 9 deletions(-)
(limited to 'client')
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index e03c900..3c35b35 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -1,24 +1,47 @@
<template>
- <div class="row">
- <div class="col-md-4">
- <img :src="productImg">
- </div>
- <div class="col-md-4">
- <h3>{{ productName }}</h3>
- <p>{{ productDescription }}</p>
- <div class="btn btn-primary" @click="buy">Add to cart</div>
+ <div class="mt-5 d-flex justify-content-center">
+ <div class="card col-md-8">
+ <div class="row g-0">
+
+ <div class="col-md-6">
+ <img :src="productImg" class="img-fluid rounded-start">
+ </div>
+
+ <div class="col-md-6">
+ <div class="card-body">
+ <h3 class="card-title" v-text="productName"></h3>
+ <b><i>Price: ${{ productPrice }}</i></b><br/>
+ <p class="card-text" v-text="productDescription"></p>
+ <div class="btn btn-dark" @click="buy">Add to cart</div>
+ </div>
+ </div>
+
+ </div>
</div>
</div>
</template>
<script>
+import axios from 'axios';
+
export default {
name: 'Product',
+ async mounted() {
+ await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${this.$route.params.id}`)
+ .then(response => {
+ this.productName = response.data.name;
+ this.productDescription = response.data.description;
+ this.productImg = `${process.env.VUE_APP_ROOT_API}/${response.data.imagePath}`;
+ this.productPrice = response.data.price;
+ })
+ .catch(error => console.error(error));
+ },
data() {
return {
productName: String,
productDescription: String,
- productImg: String
+ productImg: String,
+ productPrice: Number
}
},
methods: {
--
cgit v1.2.3