aboutsummaryrefslogtreecommitdiff
path: root/client/src/components
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-24 20:19:10 +0200
committerMateja <mail@matejamaric.com>2021-07-24 20:19:10 +0200
commitfb5eb06bdd7f7a36a73a6f844006bc66c1b545e1 (patch)
tree8554abca41ff7a628bdf613f26c579f8203abb61 /client/src/components
parent72016342cbb70ddc5d7288b80baf0571bb72a8f6 (diff)
downloadmevn-ecommerce-fb5eb06bdd7f7a36a73a6f844006bc66c1b545e1.tar.gz
mevn-ecommerce-fb5eb06bdd7f7a36a73a6f844006bc66c1b545e1.zip
Fetch products inside Vuex and display them using `ProductCard`
components.
Diffstat (limited to 'client/src/components')
-rw-r--r--client/src/components/ProductCard.vue22
1 files changed, 16 insertions, 6 deletions
diff --git a/client/src/components/ProductCard.vue b/client/src/components/ProductCard.vue
index 57698e5..849c360 100644
--- a/client/src/components/ProductCard.vue
+++ b/client/src/components/ProductCard.vue
@@ -1,9 +1,10 @@
<template>
<div class="card">
- <img :src="productImg" class="card-img-top">
+ <img :src="ImgLink" class="card-img-top">
<div class="card-body">
- <h5 class="card-title">{{ productName }}</h5>
- <a :href="productLink" class="btn btn-dark w-100">Details</a>
+ <h5 class="card-title">{{ Name }}</h5>
+ <p class="card-text">Price: ${{ Price }}</p>
+ <router-link class="btn btn-dark w-100" :to="ProductLink">Details</router-link>
</div>
</div>
</template>
@@ -12,9 +13,18 @@
export default {
name: 'ProductCard',
props: {
- productName: String,
- productImg: String,
- productLink: String
+ Id: String,
+ Name: String,
+ Img: String,
+ Price: Number
+ },
+ computed: {
+ ImgLink() {
+ return `${process.env.VUE_APP_ROOT_API}/${this.Img}`;
+ },
+ ProductLink() {
+ return `/product/${this.Id}`
+ }
}
}
</script>