caclulate rate currency result

resources/js/Pages/IkeaRoot.vue

@@ -40,12 +40,14 @@ const type = 'GeoChart';
 const form = useForm({
   countries: '',
   codes: '',
+  currency: 'EUR',
 });
 const ccountry = ref([]);
 const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
 const selected = ref(null);
 const article = ref('');
+const currency = ref([]);
 const hrates = ref([
   { text: "Currency", value: "currency", sortable: true },
   { text: "Country", value: "country_name", sortable: true },
@@ -112,6 +114,8 @@ const fetch_rates = async () => {
   try {
     const response = await axios.get(route('rates.index'))
     rates.value = response.data;
+    currency.value = rates.value.map((currency) => currency.currency);
+    currency.value.unshift('EUR');
     console.log("RATE=", rates.value);
   } catch (e) {
     const response = await Swal.fire({
@@ -198,6 +202,13 @@ const submit = () => {
             <multiselect v-model="form.codes" label="item" track-by="item" :custom-label="customLabel"
               placeholder="Find item" :searchable="true" :options="options_items" @search-change="async_search" />
           </div>
+          <div>
+            <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" />
+          </div>
           <div class="text-end mt-2">
             <button type="submit"
               class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
@@ -222,6 +233,7 @@ const submit = () => {
         </div>
       </div>
     </div>
+    
   </GuestLayout>
 </template>
 <style>