diff --git a/src/App.vue b/src/App.vue
index f68791c..38a0aef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
-
+
@@ -17,6 +17,10 @@ import AddTransaction from './components/AddTransaction.vue';
import { ref, computed } from 'vue';
+import { useToast } from 'vue-toastification';
+
+const toast = useToast();
+
const transactions = ref([
{ id: 1, text: 'Flower', amount: -19.99 },
{ id: 2, text: 'Salary', amount: 299.97 },
@@ -46,4 +50,20 @@ const expenses = computed(() => {
.reduce((acc, transaction) => acc + transaction.amount, 0)
.toFixed(2);
});
+
+// Submit transaction
+const handleTransactionSubmitted = (transactionData) => {
+ transactions.value.push({
+ id: generateUniqueId(),
+ text: transactionData.text,
+ amount: transactionData.amount,
+ });
+
+ toast.success('Transaction added.');
+};
+
+// Generate unique ID
+const generateUniqueId = () => {
+ return Math.floor(Math.random() * 1000000);
+};
diff --git a/src/components/AddTransaction.vue b/src/components/AddTransaction.vue
index 0a2d54b..a2e928d 100644
--- a/src/components/AddTransaction.vue
+++ b/src/components/AddTransaction.vue
@@ -31,6 +31,8 @@ const amount = ref('');
// Get toast interface
const toast = useToast();
+const emit = defineEmits(['transactionSubmitted']);
+
const onSubmit = () => {
if (!text.value || !amount.value) {
// Display a toast error message if either field is empty
@@ -38,8 +40,12 @@ const onSubmit = () => {
return;
}
- // Proceed with form submission logic here...
- console.log('Form submitted:', text.value, amount.value);
+ const transactionData = {
+ text: text.value,
+ amount: parseFloat(amount.value),
+ };
+
+ emit('transactionSubmitted', transactionData);
// Clear form fields
text.value = '';