moves request inside own component

lootalot_front/src/components/Chest.vue

@@ -25,12 +25,7 @@
             <tr :key="`row-${idx}`">
               <td>{{item.name}}</td>
               <td v-if="canGrab">
-                <button class="button is-primary" disabled>
+                <Request :item="item.id"></Request>
-                  <span class="icon">
-                    <i class="fas fa-praying-hands"></i>
-                  </span>
-                  <small>Request pending...</small>
-                </button>
               </td>
               <td v-if="canSell">
                 <label class="checkbox" v-show="is_selling">
@@ -50,6 +45,7 @@
 
 <script>
     import { store } from '../App.vue'
+    import Request from './Request.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -70,6 +66,9 @@
                 default: 0
             }
         },
+        components: {
+            Request
+        },
         data () {
             return {
                 app_state: store.state,

lootalot_front/src/components/Player.vue

@@ -77,7 +77,7 @@
                 app_state: store.state,
                 player: {
                     name: "Groupe",
-                    wealth: [1000,100,10,1],
+                    wealth: [100,240,145000,134],
                     debt: 0,
                 },
                 player_list: [

lootalot_front/src/components/Request.vue

@@ -0,0 +1,21 @@
+<template>
+        <button class="button is-primary" disabled>
+          <span class="icon">
+            <i class="fas fa-praying-hands"></i>
+          </span>
+          <small>Request pending...</small>
+        </button>
+</template>
+
+<style>
+    export default {
+        props: ["item"],
+        data () { 
+            return {
+            };
+        },
+        computed: {
+
+        }
+    }
+</style>

lootalot_front/src/components/Wealth.vue

@@ -3,22 +3,22 @@
     <span class="icon is-large">
       <i class="fas fa-2x fa-piggy-bank"></i>
     </span>
-    <nav class="columns is-mobile">
+    <nav class="columns is-mobile is-multiline">
       <div class="column">
-          <p class="heading">CP</p>
+          <p class="heading">PC</p>
-          <p class="is-size-3">{{ wealth[0] }}</p>
+          <p class="is-size-4">{{ wealth[0] }}</p>
       </div>
       <div class="column">
-          <p class="heading">SP</p>
+          <p class="heading">PA</p>
-          <p class="is-size-3">{{ wealth[1] }}</p>
+          <p class="is-size-4">{{ wealth[1] }}</p>
       </div>
       <div class="column">
-          <p class="heading">GP</p>
+          <p class="heading">PO</p>
-          <p class="is-size-3">{{ wealth[2] }}</p>
+          <p class="is-size-4">{{ wealth[2] }}</p>
       </div>
       <div class="column">
           <p class="heading">PP</p>
-          <p class="is-size-3">{{ wealth[3] }}</p>
+          <p class="is-size-4">{{ wealth[3] }}</p>
       </div>
     </nav>
     <div v-if="edit"> <!-- or v-show ? -->