Formulare optimiert, Admin Panel angefangen

src/components/startseite/Forms.vue

@@ -35,6 +35,7 @@ function openModal(form: Formular){
 	modalOpened.value=true;
 }
 
+const values=ref({});
 </script>
 <template>
 		<Modal v-show="modalOpened" @closemodal="modalOpened=false">
@@ -53,7 +54,7 @@ function openModal(form: Formular){
 							</h3>
 							<br />
 							<h5 style="text-align: center">
-								<b @click="openModal(form)">{{ form.minitext }}
+								<b @click="openModal(form)" class="fakelink">{{ form.minitext }}
 </b> <br />
 															</h5>
 							<br />
@@ -80,8 +81,11 @@ function openModal(form: Formular){
 									{{
 										field.displayvalue ?? field.displayname ?? field.name
 									}}:
+								<span v-if="field.type == 'range'"
+									><br />{{ values[field.name] }}</span
+								>
 								</label>
-								<input
+								<FormKit
 									v-if="field.type != 'textarea'"
 									:id="'field-' + field.id"
 									:type="field.type"
@@ -94,6 +98,8 @@ function openModal(form: Formular){
 									:checked="field.checked"
 									:title="field.title"
 									:value="field.value"
+									v-model="values[field.name]"
+
 								/>
 								<textarea
 									v-else
@@ -105,9 +111,7 @@ function openModal(form: Formular){
 									:title="field.title"
 									:value="field.value"
 								></textarea>
-								<span v-if="field.type == 'range'"
-									><br />{{ field.value }}</span
-								>
+								
 							</div>
 
 							<div
@@ -132,4 +136,9 @@ function openModal(form: Formular){
 label {
 	margin-right: 10px;
 }
+.fakelink{
+		color: blue;
+		text-decoration: underline;
+		cursor: pointer;
+}
 </style>