updated the cart page

package.json

 {
   "name": "mcart",
-  "version": "0.1.15",
+  "version": "0.1.27",
   "private": false,
   "main": "./dist/mComponents.common.js",
   "files": [

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" :message="test"></list-cart-items>
+          <list-cart-items displaying="block" :test="test" @delete-cart-items='removeItem' @qty-dropdown='getQty'></list-cart-items>
           <banner>
             <div
               class="card"
@@ -20,7 +20,7 @@
               </div>
             </div>
           </banner>
-          <frequently-view>
+          <!-- <frequently-view>
             <div class="card">
               <h3>Current Offers</h3>
               <p>
@@ -29,7 +29,7 @@
               </p>
               <list-cart-items displaying="none"></list-cart-items>
             </div>
-          </frequently-view>
+          </frequently-view> -->
           <suggest-product
             title="Customers Also Shopped"
             :list="list"
@@ -53,7 +53,7 @@ import TopBar from "./components/TopBar.vue";
 import Promo from "./components/Promo.vue";
 import CheckoutInfo from "./components/CheckoutInfo.vue";
 import Banner from "./components/Banner.vue";
-import FrequentlyView from "./components/FrequentlyView.vue";
+//import FrequentlyView from "./components/FrequentlyView.vue";
 import ListCartItems from "./components/ListCartItems.vue";
 import SuggestProduct from "./components/SuggestProduct.vue";
 
@@ -74,10 +74,21 @@ export default {
     Promo,
     CheckoutInfo,
     Banner,
-    FrequentlyView,
+    //FrequentlyView,
     ListCartItems,
     SuggestProduct,
   },
+  created() {
+    console.log("===dsaf===", this.test)
+  },
+  methods: {
+    removeItem(id){
+      this.$emit('delete-cart-items', id)
+    },
+    getQty(e, item) {
+      this.$emit('qty-dropdown',e, item)
+    }
+  },
   mounted() {
     this.loading = true; //the loading begin
     fetch("https://fakestoreapi.com/products?limit=5")

src/components/ListCartItems.vue

 <template>
   <div>
-    <div class="card" v-if="loading">
-      loading.....
-    </div>
+    <div class="card" v-if="loading">loading.....</div>
+    <div class="card" v-else-if="test == undefined"><p>No item into cart </p></div>
     <div
       v-else
       class="overflow-hidden mb-2 card"
-      v-for="item in message"
+      v-for="item in test"
       v-bind:key="item.id"
     >
       <div class="card-body">
@@ -19,37 +18,27 @@
               <div class="card-text">
                 <b>{{ item.title }}</b>
                 <p>{{ item.description }}</p>
-                <!-- <p>This is Dynamic {{ message }}</p> -->
               </div>
               <br />
               <br />
-              <div class="card-text">
-                Size: M
-              </div>
-              <div class="card-text">
-                Color: Red
-              </div>
+              <div class="card-text">Size: M</div>
+              <div class="card-text">Color: Red</div>
             </div>
           </div>
           <div class="col col-lg-2">
-            <select v-model="selected">
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
+            <select v-model="item.qty" @change="switchSelect($event, item)">
+            <option value="1">1</option>
+             <option value="2">2</option>
+             <option value="3">3</option>
+             <option value="4">4</option>
+             <option value="5">5</option>
+              <option value="6">5</option>
             </select>
           </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 class="grey">Subtotal {{ item.newPrice }}</p>
             </div>
           </div>
         </div>
@@ -64,11 +53,12 @@
           <div class="links">
             <a href="">Save For later </a>
             <a href="">Move to List </a>
-            <a href="#" @click="deleteCartItem(item.id)">Remove </a>
+            <a href="#" @click="$emit('delete-cart-items', item.id)">Remove </a>
           </div>
         </div>
       </div>
     </div>
+    
   </div>
 </template>
 
@@ -79,18 +69,16 @@ export default {
     return {
       list: [],
       loading: false,
-      selected: "1",
+      priceCalculate: 0,
     };
   },
-  props: ["displaying", "message"],
-  computed: {
-    getTotal: function(price) {
-      return price + this.selected;
-    },
+  props: {
+    test: Array,
+    displaying: String
   },
   methods: {
-    deleteCartItem(id) {
-      this.$emit('delete_cart_item', id)
+    switchSelect(e, item){
+      this.$emit('qty-dropdown', e.target.value, item)
     }
   },
   mounted() {