Select country in product search by geoip

resources/js/Pages/IkeaRoot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
+import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
 import Swal from 'sweetalert2';
 
 import Multiselect from 'vue-multiselect';
@@ -13,21 +13,6 @@ import axios from 'axios';
 import filterimg from '@/assets/eglass-filter.png';
 
 
-const props = defineProps({
-  products: {
-    type: Object,
-    default: []
-  },
-  countryHash: {
-    type: Object,
-    default: []
-  },
-  menu: {
-    type: Object,
-    default: []
-  }
-})
-
 const sdropdown = ref([
   { text: "Description", value: "typeName" },
   { text: "Item name", value: "name" },
@@ -42,6 +27,7 @@ const countryCurrency = ref({});
 const showItemFilter = ref(false);
 const showDescFilter = ref(false);
 const showUnitsFilter = ref(false);
+const geoip = ref({});
 
 const rates = ref([]);
 const options_items = ref([]);
@@ -263,6 +249,8 @@ const fetch_ccodes = async () => {
     ccodes.value = response.data;
     ccodes.value = Object.entries(ccodes.value).map(([k, v]) => { if (v !== null) return { "country": k, "code": v } }).filter(n => n);
     console.log("ccodes=", ccodes.value);
+    const response2 = await axios.get(route('geo.ip.get'));
+    geoip.value = response2.data;
   } catch (e) {
     const response = await Swal.fire({
       title: __('are you want to try again') + '?',
@@ -363,8 +351,12 @@ const submit = () => {
   }
   form.post(route('products.compare'));
 };
-</script>
 
+watch(ccodes, (codes) => {
+  console.log('NNN=',codes);
+  form.country = codes.map((c) => { if (c.code == geoip.iso_code) return c; });
+})
+</script>
 <template>
   <GuestLayout>
     <div class="flex flex-wrap gap-2 justify-center align-middle ">