Transaction List

src/App.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <Balance />
     <IncomeExpenses />
-    <TransactionList />
+    <TransactionList :transactions="transactions" />
     <AddTransaction />
   </div>
 </template>
@@ -14,4 +14,13 @@ import Balance from './components/Balance.vue';
 import IncomeExpenses from './components/IncomeExpenses.vue';
 import TransactionList from './components/TransactionList.vue';
 import AddTransaction from './components/AddTransaction.vue';
+
+import { ref } from 'vue';
+
+const transactions = ref([
+  { id: 1, text: 'Flower', amount: -19.99 },
+  { id: 2, text: 'Salary', amount: 299.97 },
+  { id: 3, text: 'Book', amount: -10 },
+  { id: 4, text: 'Camera', amount: 150 },
+]);
 </script>

src/components/TransactionList.vue

@@ -1,11 +1,24 @@
 <template>
   <h3>History</h3>
   <ul id="list" class="list">
-    <li class="minus">
-      Cash <span>-$400</span><button class="delete-btn">x</button>
-    </li>
-    <li class="plus">
-      Salary <span>+$1000</span><button class="delete-btn">x</button>
+    <li
+      v-for="transaction in transactions"
+      :key="transaction.id"
+      :class="transaction.amount < 0 ? 'minus' : 'plus'"
+    >
+      {{ transaction.text }} <span>${{ transaction.amount }}</span
+      ><button class="delete-btn">x</button>
     </li>
   </ul>
 </template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  transactions: {
+    type: Array,
+    required: true,
+  },
+});
+</script>