Updated

src/components/ItemComponents/NewItemForm.vue

@@ -30,6 +30,43 @@
       </div>
     </div>
 
+    <!-- Select category -->
+    <div class="mb-6">
+      <label
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+          id="selectCategoryLabel"
+      >Kategori</label
+      >
+      <select
+          v-model="v$.item.select.$model"
+          id="categories"
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+      >
+        <option class="text-gray-400" value="" disabled selected>
+          Velg en kategori
+        </option>
+        <option
+            v-for="category in categories"
+            :key="category"
+            class="text-gray-900 text-sm"
+        >
+          {{ category }}
+        </option>
+      </select>
+
+      <!-- error message for select box -->
+      <div
+          class="text-error"
+          v-for="(error, index) of v$.item.select.$errors"
+          :key="index"
+      >
+        <div class="text-error text-sm">
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Grupper -->
     <div class="mb-6">
       <label
         class="block text-sm font-medium text-gray-900 dark:text-gray-400"