add verification

src/components/AddItemForm.vue

@@ -17,6 +17,7 @@ const item = reactive({
 const form = ref(null);
 
 const submit = () => {
+  if (isValid.value === false) return;
   store.items.push({
     name: item.name,
     price: item.price * 100,
@@ -33,23 +34,31 @@ const submit = () => {
       label="Item Name"
       required
       v-model="item.name"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-text-field
       label="Price"
       suffix="€"
       required
       v-model="item.price"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-text-field
       label="Description"
       required
       v-model="item.description"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-select
       label="User"
       :items="store.users.map(user => user.name)"
       required
       v-model="item.user"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-btn color="primary" @click="submit()">add item</v-btn>
   </v-form>

src/components/EditItemForm.vue

@@ -21,6 +21,8 @@ const item = reactive({
 const form = ref(null);
 
 const submit = () => {
+  console.log(isValid.value)
+  if (isValid.value === false) return;
   props.item.name = item.name;
   props.item.price = item.price * 100;
   props.item.user = store.users.find(user => user.name === item.user);
@@ -35,23 +37,31 @@ const submit = () => {
       label="Item Name"
       required
       v-model="item.name"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-text-field
       label="Price"
       suffix="€"
       required
       v-model="item.price"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-text-field
       label="Description"
       required
       v-model="item.description"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-select
       label="User"
       :items="store.users.map(user => user.name)"
       required
       v-model="item.user"
+      validate-on="blur"
+      :rules="[v => !!v || 'Item is required']"
     />
     <v-btn color="primary" @click="submit()">edit item</v-btn>
   </v-form>