shopping cart add and remove products quantity

static/components/shopping-cart/shopping-cart.html

@@ -4,17 +4,19 @@
   </q-badge>
   <q-menu v-if="cart.size">
     <q-list style="min-width: 100px">
-      <q-item :key="p.id" v-for="p in cartMenu">
-        <q-item-section side>
-          <span>{{p.quantity}} x </span>
+      <q-item :id="p.id" :key="p.id" v-for="p in cartMenu">
+        <q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
+        <q-item-section>
+          <span class="text-center q-ma-xs">{{p.quantity}} x </span>
         </q-item-section>
+        <q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
         <q-item-section avatar v-if="p.image">
           <q-avatar color="primary">
-            <img size="sm" :src="p.image" />
+            <img :src="p.image" />
           </q-avatar>
         </q-item-section>
 
-        <q-item-section>
+        <q-item-section top class="q-mx-sm">
           <q-item-label>{{ p.name }}</q-item-label>
         </q-item-section>
 
@@ -42,7 +44,7 @@
         @click="$emit('open-checkout')"
       ></q-btn>
       <q-btn
-        class="q-ml-lg"
+        class="q-ml-auto"
         flat
         color="primary"
         label="Reset"

static/components/shopping-cart/shopping-cart.js

@@ -5,12 +5,32 @@ async function shoppingCart(path) {
     name: 'shopping-cart',
     template,
 
-    props: ['cart', 'cart-menu', 'remove-from-cart', 'reset-cart'],
+    props: [
+      'cart',
+      'cart-menu',
+      'add-to-cart',
+      'remove-from-cart',
+      'reset-cart',
+      'products'
+    ],
     data: function () {
       return {}
     },
     computed: {},
-    methods: {},
+    methods: {
+      add(id) {
+        this.$emit(
+          'add-to-cart',
+          this.products.find(p => p.id == id)
+        )
+      },
+      remove(id) {
+        this.$emit(
+          'remove-from-cart',
+          this.products.find(p => p.id == id)
+        )
+      }
+    },
     created() {}
   })
 }