Actually call API

web/src/components/Autocomplete.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
 
-interface Suggestion {
+export interface Suggestion {
     ID : string
     Name : string
 }
@@ -34,7 +34,7 @@ export default defineComponent({
             e.preventDefault();
         },
         load(text : String) {
-            this.$emit('update:modelValue', {ID: "", Name: text});
+            this.$emit('update:modelValue', {ID: null, Name: text});
             if (text == ""){
                 this.$data.Suggestions = [];
                 return;
@@ -64,7 +64,7 @@ export default defineComponent({
         },
         clear() {
             this.$data.Selected = undefined;
-            this.$emit('update:modelValue', {ID: "", Name: this.$data.SearchQuery});
+            this.$emit('update:modelValue', {ID: null, Name: this.$data.SearchQuery});
         }
     }
 })

web/src/pages/Account.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-import Autocomplete from '../components/Autocomplete.vue'
+import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 
 export default defineComponent({
     data() {
         return {
             TransactionDate: new Date().toISOString().substring(0, 10),
-            Payee: "",
+            Payee: undefined as Suggestion | undefined,
-            Category: "",
+            Category: undefined as Suggestion | undefined,
             Memo: "",
             Amount: 0
         }
@@ -22,6 +22,20 @@ export default defineComponent({
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
+            fetch("/api/v1/transaction/new", {
+                method: "POST",
+                body: JSON.stringify({
+                    budget_id: this.budgetid,
+                    date: this.$data.TransactionDate,
+                    payee: this.$data.Payee,
+                    category: this.$data.Category,
+                    memo: this.$data.Memo,
+                    amount: this.$data.Amount
+                }),
+                headers: this.$store.getters.AuthHeaders,
+            })
+                .then(x => x.json())
+                .then(x => console.log(x));
         },
     }
 })
@@ -53,7 +67,7 @@ export default defineComponent({
                     <input type="currency" v-model="Amount" />
                 </td>
                 <td style="width: 20px;">
-                    <input type="submit" @click="saveTransaction" value="ι" />
+                    <input type="submit" @click="saveTransaction" value="Save" />
                 </td>
                 <td style="width: 20px;"></td>
             </tr>