diff options
| -rw-r--r-- | client/src/views/Product.vue | 41 |
1 files changed, 32 insertions, 9 deletions
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: { |