Adds component to accept props from host app

src/App.vue

@@ -4,7 +4,7 @@
       <div class="justify-content-md-center row">
         <div class="col col-lg-8">
           <top-bar></top-bar>
-					<list-cart-items displaying="block"></list-cart-items>
+          <list-cart-items displaying="block" :message="test"></list-cart-items>
           <banner>
             <div
               class="card"
@@ -30,8 +30,14 @@
               <list-cart-items displaying="none"></list-cart-items>
             </div>
           </frequently-view>
-					<suggest-product title="Customers Also Shopped" :list="list"></suggest-product>
-					<suggest-product title="Recently Viewed" :list="list"></suggest-product>
+          <suggest-product
+            title="Customers Also Shopped"
+            :list="list"
+          ></suggest-product>
+          <suggest-product
+            title="Recently Viewed"
+            :list="list"
+          ></suggest-product>
         </div>
         <div class="col col-lg-4">
           <promo></promo>
@@ -59,8 +65,9 @@ export default {
       loading: false,
     };
   },
-	props:{
-		productList: Array
+  props: {
+    productList: Array,
+    test: Array,
   },
   components: {
     TopBar,
@@ -77,7 +84,7 @@ export default {
       .then((res) => res.json())
       .then((res) => {
         this.list = res;
-        console.log("===list", this.list)
+        console.log("===list", this.list);
       })
       .finally(() => (this.loading = false)); // set loading to false when request finish
   },

src/components/ListCartItems.vue

@@ -3,19 +3,24 @@
     <div class="card" v-if="loading">
       loading.....
     </div>
-        <div v-else class="overflow-hidden mb-2 card" v-for="item in list" v-bind:key="item.id">
+    <div
+      v-else
+      class="overflow-hidden mb-2 card"
+      v-for="item in message"
+      v-bind:key="item.id"
+    >
       <div class="card-body">
         <div class="row no-gutters">
           <div class="col col-lg-2">
-                    <img :src="item.image" alt="Image" class="rounded-0"/>
+            <img :src="item.image" alt="Image" class="rounded-0" />
           </div>
           <div class="col col-lg-6">
             <div :title="item.title">
               <div class="card-text">
-                            <b>{{item.title }}</b>
-                            <p>{{item.description}}</p>
+                <b>{{ item.title }}</b>
+                <p>{{ item.description }}</p>
+                <!-- <p>This is Dynamic {{ message }}</p> -->
               </div>
-                        
               <br />
               <br />
               <div class="card-text">
@@ -25,7 +30,6 @@
                 Color: Red
               </div>
             </div>
-                    
           </div>
           <div class="col col-lg-2">
             <select v-model="selected">
@@ -38,19 +42,24 @@
           </div>
           <div class="col col-lg-2">
             <div class="card-text">
-                            <p>Orig. {{item.price }} </p>
-                            <p class="red">Now {{item.price}} </p>
-                            <p class="grey">Subtotal {{item.price}} </p>
-                            <br/>
-                            <br/>
-                            <p><b>Total {{item.price * selected}} </b></p>
+              <p>Orig. {{ item.price }}</p>
+              <p class="red">Now {{ item.price }}</p>
+              <p class="grey">Subtotal {{ item.price }}</p>
+              <br />
+              <br />
+              <p>
+                <b>Total {{ item.price * selected }} </b>
+              </p>
             </div>
           </div>
         </div>
         <div :style="displaying">
           <div>
             <p><b>Sihip it </b></p>
-                    <p> <span class="green">In Stock: </span> Usually ships within 3 business days.</p>
+            <p>
+              <span class="green">In Stock: </span> Usually ships within 3
+              business days.
+            </p>
           </div>
           <div class="links">
             <a href="">Save For later </a>
@@ -64,72 +73,68 @@
 </template>
 
 <script>
-
 export default {
   name: "ListCartItems",
   data() {
     return {
       list: [],
       loading: false,
-            selected: '1',
-        }
+      selected: "1",
+    };
   },
-    props: ['displaying'],
+  props: ["displaying", "message"],
   computed: {
-        getTotal : function(price) {
-            return price + this.selected
-        }
+    getTotal: function(price) {
+      return price + this.selected;
+    },
   },
   methods: {
     deleteCartItem(id) {
-            fetch('https://fakestoreapi.com/products/'+ id)
-            .then((res)=> {
-                console.log("==", res)
-            })
+      fetch("https://fakestoreapi.com/products/" + id).then((res) => {
+        console.log("==", res);
+      });
 
-            var index = this.list.map(x => {
+      var index = this.list
+        .map((x) => {
           return x.id;
-            }).indexOf(id);
+        })
+        .indexOf(id);
 
       this.list.splice(index, 1);
-        }
+    },
   },
   mounted() {
-        this.loading = true //the loading begin
-        fetch('https://fakestoreapi.com/products?limit=5')
-        .then(res=>  res.json())
+    this.loading = true; //the loading begin
+    fetch("https://fakestoreapi.com/products?limit=5")
+      .then((res) => res.json())
       .then((res) => {
-            this.list = res
+        this.list = res;
       })
-        .finally(() => (this.loading = false)) // set loading to false when request finish
-
-    }
-}
+      .finally(() => (this.loading = false)); // set loading to false when request finish
+  },
+};
 </script>
 
 <style scoped>
-    .green {
-        color:rgb(0, 135, 87)
-
-    }
-    .red {
-        color: rgb(224, 26, 43)
-
-    }
-    .grey {
-        color: rgb(98, 99, 105)
-
-    }
-    p {
+.green {
+  color: rgb(0, 135, 87);
+}
+.red {
+  color: rgb(224, 26, 43);
+}
+.grey {
+  color: rgb(98, 99, 105);
+}
+p {
   margin: 0;
-    }
-    .no-gutters {
+}
+.no-gutters {
   margin-bottom: 20px;
-    }
-    .links  {
+}
+.links {
   margin-top: 20px;
-    }
-    .links a {
+}
+.links a {
   margin-right: 100px;
-    }
+}
 </style>