Added ability to select a tag but only works with one new transaction when there are duplicates too.

src/components/ApplyTag.vue

@@ -5,9 +5,22 @@
     </button>
 
     <modal v-show="isModalVisible" @close="closeModal">
-      <slot name="body">
+      <template v-slot:body>
         Successfully used slot body.
-      </slot>
+        <br>
+        {{ transaction.date }} - {{ transaction.transactionTypeDescription }} - {{ transaction.isExpenditure ? "Expenditure" : "Income" }} -> {{ transaction.amount }}
+        <br>
+        {{ transaction.description }}
+
+        <select v-model="selectedTag">
+          <option v-for="tag in tagsExpenditure" v-bind:key="tag">{{ tag }}</option> 
+        </select>
+      </template>
+      <template v-slot:footer>
+        <button type="button" class="btn-green" @click="saveTransaction" aria-label="Close modal">
+              Save transaction and tags
+        </button>
+      </template>
     </modal>
   </div>
 </template>
@@ -19,6 +32,7 @@
     name: 'app',
     props: [
       "transaction", 
+      "tagsExpenditure",
       "isModalVisible"
     ],
     components: {
@@ -26,14 +40,24 @@
     },
     data () {
       return {
+        selectedTag: ""
       };
     },
     methods: {
+      closeModal() {
+        this.$emit('close');
+      },
       showModal() {
         this.$emit('show');
       },
-      closeModal() {
+      saveTransaction() {
+        const newTransaction = this.transaction; 
+        var newTags = [];
+        newTags.push(this.selectedTag);
+        newTransaction.tags = newTags;
+
         this.$emit('close');
+        this.$emit('add', newTransaction);
       }
     },
   };

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ApplyTag :transaction="newTransaction" :isModalVisible="isModalVisible" @show="showModal" @close="closeModal"/>
+    <ApplyTag :transaction="newTransaction" :isModalVisible="isModalVisible" :tagsExpenditure="tagsExpenditure" @show="showModal" @close="closeModal" @add="addTransaction"/>
     <AddTransaction v-on:add-transaction="checkTransactionExists" />
     <Transactions v-bind:transactions="transactions" v-on:del-transaction="deleteTransaction" />
   </div>
@@ -67,12 +67,12 @@ export default {
       this.transactions = this.transactions.filter(transaction => transaction.id !== id);
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
     },
-    addTransaction() {
+    addTransaction(newTransaction) {
       // When the confirmation button is clicked, return the value of the dropdown 
 
       
       // Add the transaction
-      this.transactions.push(this.newTransaction);
+      this.transactions.push(newTransaction);
       this.saveTransactions();
     },
     checkTransactionExists(newTransaction) {
@@ -89,6 +89,7 @@ export default {
       }
     },
     saveTransactions() {
+      // Save the transactions to localstorage so they persist after closing the session
       localStorage.setItem("transactionStorage", JSON.stringify(this.transactions));
     },
     closeModal() {