Error on search empty product

lang/id.json

@@ -107,5 +107,6 @@
     "exchange": "Exchange",
     "referenceerror: rates is not defined": "ReferenceError: rates is not defined",
     "referenceerror: currency is not defined": "ReferenceError: currency is not defined",
-    "typeerror: can't access property \"unshift\", currency.velue is undefined": "TypeError: can't access property \"unshift\", currency.velue is undefined"
+    "typeerror: can't access property \"unshift\", currency.velue is undefined": "TypeError: can't access property \"unshift\", currency.velue is undefined",
+    "item must be selected": "Item must be selected"
 }

resources/js/Pages/IkeaRoot.vue

@@ -12,7 +12,7 @@ import { useForm } from '@inertiajs/inertia-vue3'
 import axios from 'axios';
 import IkeaLogo from './Ikea/IkeaLogo.vue';
 
-const props = defineProps({ 
+const props = defineProps({
   products: {
     type: Object,
     default: []
@@ -25,15 +25,15 @@ const props = defineProps({
     type: Object,
     default: []
   }
- })
+})
 
- console.log(props.countryHash);
+console.log(props.countryHash);
 let tproducts = computed(() => {
-  return props.products.map((prod) => { 
+  return props.products.map((prod) => {
     prod.salesPrice = parseFloat(prod.salesPrice);
     prod.country = props.countryHash[prod.country];
     return prod;
-   } )
+  })
 })
 
 const type = 'GeoChart';
@@ -55,9 +55,9 @@ const hrates = ref([
 ]);
 // { "country": "AT", "code": "50161321", "url": "https://www.ikea.com/at/de/p/hol-aufbewahrungstisch-akazie-50161321/", "name": "HOL", "typeName": "Aufbewahrungstisch", "mainImageUrl": "https://www.ikea.com/at/de/images/products/hol-aufbewahrungstisch-akazie__0104310_pe251255_s5.jpg", "itemNoGlobal": "50161321", "salesPrice": "80.99", "tag": "FAMILY_PRICE", "last_mod": "2023-12-03 16:44:24" }, 
 const hproducts = ref([
-  { text: "Country", value:"country", sortable: true},
-  { text: "Name", value:"name", sortable: true},
-  { text: "Price", value:"salesPrice", sortable: true}
+  { text: "Country", value: "country", sortable: true },
+  { text: "Name", value: "name", sortable: true },
+  { text: "Price", value: "salesPrice", sortable: true }
 ]);
 
 const rates = ref([]);
@@ -174,12 +174,21 @@ onMounted(fetch);
 onMounted(fetch_rates);
 
 const submit = () => {
-    form.post(route('products.compare'));
+  console.log('ITEM=', form);
+  if (form.codes.length == 0) {
+    Swal.fire({
+      title: "Empty code",
+      text: "You must enter product!",
+      icon: "error"
+    });
+    return false;
+  }
+  form.post(route('products.compare'));
 };
 </script>
 
 <template>
-    <GuestLayout>
+  <GuestLayout>
     <div class="flex flex-wrap gap-2 justify-center align-middle ">
       <div class="justify-center rounded-md border-black border-8 max-h-[518px]">
         <GChart :events="gchartEvents" :type="type" :data="ccountry_filter" :options="options"
@@ -206,8 +215,8 @@ const submit = () => {
             <span class="font-extrabold font-mono">Prepocet do meny</span>
           </div>
           <div>
-            <multiselect v-model="form.currency" :multiple="flase" :allow-empty="false"
-              placeholder="Currency" :searchable="true" :options="currency" />
+            <multiselect v-model="form.currency" :multiple="false" :allow-empty="false" placeholder="Currency"
+              :searchable="true" :options="currency" />
           </div>
           <div class="text-end mt-2">
             <button type="submit"
@@ -229,11 +238,11 @@ const submit = () => {
           <span class="font-extrabold font-mono">Vysledky vyhladavania</span>
         </div>
         <div>
-          <EasyTable :rows-per-page=15 :headers="hproducts" :items="tproducts" alternating></EasyTable>  
+          <EasyTable :rows-per-page=15 :headers="hproducts" :items="tproducts" alternating></EasyTable>
         </div>
       </div>
     </div>
-    
+
   </GuestLayout>
 </template>
 <style>