Init

frontend/src/components/server/server_create.vue

@@ -26,6 +26,10 @@ let form_inputs = ref({
 async function create_server(){
   const response = await fetch("/api/server/servers/", {
     method: 'POST',
+    headers: {
+      "Content-Type": "application/json",
+      "Accept": "application/json",
+    },
     body: JSON.stringify(form_inputs.value)
   })
   if (response.ok) {

frontend/src/components/server/server_detail.vue

@@ -1,15 +1,19 @@
 <template>
   <div>
-    {{server}}
+    <div>
+      {{server}}
+      <button @click="remove">Remove</button>
+    </div>
+
   </div>
-  <button @click="remove">Remove</button>/
+
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, onMounted} from "vue";
 
 // defined constants
-const props = defineProps({
+const {server} = defineProps({
   server: {
     type: Object,
     required: true
@@ -19,7 +23,7 @@ const emit = defineEmits(['remove'])
 
 // defined methods
 async function remove(){
-  const response = await fetch("/api/server/servers/", {
+  const response = await fetch(`/api/server/servers/${server.id}/`, {
     method: 'DELETE'
   })
   if (response.ok) {

frontend/src/components/server/server_list.vue

@@ -6,6 +6,7 @@
     v-for="server in servers"
     :server="server"
     :key="server.id"
+    @remove="servers.splice(servers.indexOf(server), 1)"
   />
 </template>