Test Again

components/Typ.vue

@@ -29,11 +29,12 @@
               </MDBRow> 
             </MDBCol>
           </MDBRow>
-              <!--<MDBContainer class="bg-white rounded-4">-->
+              <!--<MDBContainer class="bg-white rounded-4"> -->
                 <MDBRow style="margin-bottom:40px;">
                   <MDBCol md="12">
-                    <MDBTable striped hover bordered sm class="rounded-4">
+                    <div id="datatable" data-mdb-loading="true"></div>
-                      <thead>
+                  <!--  <MDBTable striped hover border="primary" sm class="rounded-4">
+                      <thead class="table-dark">
                         <tr>
                           <th scope="col">#</th>
                           <th scope="col">Description</th>
@@ -45,7 +46,7 @@
                           <td>{{ t.bezeichnung }}</td>
                         </tr>
                       </tbody>
-                    </MDBTable>
+                    </MDBTable> -->
                   </MDBCol>
                 </MDBRow> 
             <!--</MDBContainer>-->
@@ -59,8 +60,15 @@
       </MDBContainer>
   </template>
   
+  <style>
+    @import 'bootstrap';
+    @import 'datatables.net-bs5';
+  </style>
+
   <script setup lang="ts">
-    import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer } from "mdb-vue-ui-kit";
+    import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer, mdbClickOutside, } from "mdb-vue-ui-kit";
+    import { DataTable } from 'datatables.net-vue3';
+    import { DataTablesCore } from 'datatables.net-bs5';
     import { ref } from "vue";
 
     const bezeichnung = ref("");
@@ -69,7 +77,29 @@
     const checkForm = (event: Event) => {
     event.target.classList.add("was-validated");
   };
-    const {data: typen } = await useFetch('http://ubodroid-2:8080/api/v1/typ');
+    const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
+  
+    const columns = [
+      { label: '#', field: 'id' }, 
+      { label: 'Description', field: 'bezeichnung'},
+    ];
+
+    const asyncTable = new MDBTable(
+      document.getElementById('datatable'),
+      {}
+    )
+
+
+    async function onSubmit() {
+      let fd = new FormData();
+      fd.append('bezeichnung', bezeichnung.value);
+      await $fetch('http://ubodroid-2:8081/api/v1/typ',{
+      method: 'POST',
+      body: fd
+    });
+    console.log('POST ausgeführt...'+ bezeichnung);
+    } 
+    
     
     /*export default {
       data() {