Initiated slots, props and emitting on the modal for a better procedural process.

src/components/ApplyTag.vue

@@ -1,17 +1,14 @@
 <template>
   <div id="app">
-    <button
+    <button type="button" class="btn" @click="showModal">
-      type="button"
-      class="btn"
-      @click="showModal"
-    >
       Open Modal!
     </button>
 
-    <modal
+    <modal v-show="isModalVisible" @close="closeModal">
-      v-show="isModalVisible"
+      <slot name="body">
-      @close="closeModal"
+        Successfully used slot body.
-    />
+      </slot>
+    </modal>
   </div>
 </template>
 
@@ -20,22 +17,24 @@
 
   export default {
     name: 'app',
+    props: [
+      "transaction", 
+      "isModalVisible"
+    ],
     components: {
       Modal,
     },
     data () {
       return {
-        isModalVisible: false,
       };
     },
     methods: {
       showModal() {
-        this.isModalVisible = true;
+        this.$emit('show');
       },
       closeModal() {
-        this.isModalVisible = false;
+        this.$emit('close');
       }
     },
   };
-</script>
+</script>
-

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <ApplyTag />
+    <ApplyTag :transaction="newTransaction" :isModalVisible="isModalVisible" @show="showModal" @close="closeModal"/>
-    <AddTransaction v-on:add-transaction="addTransaction" />
+    <AddTransaction v-on:add-transaction="checkTransactionExists" />
     <Transactions v-bind:transactions="transactions" v-on:del-transaction="deleteTransaction" />
   </div>
 </template>
@@ -26,6 +26,8 @@ export default {
           "bank": ""
         }
       ], 
+      isModalVisible: false,
+      newTransaction: {},
       "transactions": [],
       tagsExpenditure: [
         "Appearance",
@@ -65,28 +67,36 @@ export default {
       this.transactions = this.transactions.filter(transaction => transaction.id !== id);
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
     },
-    addTransaction(newTransaction) {
+    addTransaction() {
+      // When the confirmation button is clicked, return the value of the dropdown 
+
+      
+      // Add the transaction
+      this.transactions.push(this.newTransaction);
+      this.saveTransactions();
+    },
+    checkTransactionExists(newTransaction) {
       // Determine whether this transaction already exists
       const found = this.transactions.some(transaction => transaction.date === newTransaction.date && transaction.transactionTypeDescription === newTransaction.transactionTypeDescription && transaction.description === newTransaction.description && transaction.isExpenditure === newTransaction.isExpenditure && transaction.amount === newTransaction.amount && transaction.balance === newTransaction.balance);
       if (found) {
         alert('found duplicate transaction, not adding it - ' + newTransaction.date + ' :: ' + newTransaction.description);
       }
       else {
-        // Open a modal to let the user select a tag to apply to the transaction
+        // Store the transaction in the Vue data
-        // var newTransactionWithTag = this.applyTag(newTransaction);
+        this.newTransaction = newTransaction;
-
+        // Open the modal & display the transaction along with a dropdown of transaction tags and a confirmation button to let the user select a tag to apply to the transaction
-        // Add the transaction
+        this.isModalVisible = true;
-        this.transactions.push(newTransaction);
-        this.saveTransactions();
       }
     },
-    // applyTag(newTransaction) {
-        
-    // },
     saveTransactions() {
-      localStorage.setItem("lastname", "Smith");
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
-    }
+    },
+    closeModal() {
+      this.isModalVisible = false;
+    },
+    showModal() {
+        this.isModalVisible = true;
+    },
   }
 }
 </script>