How to use intlTelInputRef to get the country dialling code?

[gvanto]

I am finding that the following line doesn't work as expected: https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/set-number/App.vue#L21

I am using vue (nuxt) 3, with "intl-tel-input": "^25.3.1"

script setup:

import IntlTelInput from "intl-tel-input/vueWithUtils";
import "intl-tel-input/styles";

const telOptions = ref({
    initialCountry: 'auto',
    countryOrder: ["za", "us", "gb", "de", "fr", "pt", "es"],
    geoIpLookup: (success: (countryCode: string) => void, failure: () => void) => {
        fetch("https://ipapi.co/json")
            .then((res) => res.json())
            .then((data) => {
                //console.log('🌍 IP API Country Code:', data.country_code)
                success(data.country_code)
            })
            .catch(() => {
                console.log('error');
            });
    },
    separateDialCode: true
});

const intlTelInputRef = ref(null);

const onTelNumberChanged = (telNumber: string) => {
    // this always returns 'undefined'
    console.log('intlTelInputRef.value.instance=', intlTelInputRef.value?.instance);
    
    // Trying to get a reference to the instance in order to get the country dialling code
    // eg: https://github.com/jackocnr/intl-tel-input/issues/1011 
}


// In the template: 

<IntlTelInput
                                                ref="intlTelInputRef"
                                                @changeCountry="onTelCountryChanged"
                                                @changeNumber="onTelNumberChanged"
                                                :options="telOptions"
                                              
                                            />

So for example, trying to get the "+34" in this case:

Any help much appreciated

[gvanto]

Updated method with the following debug code:

const onTelNumberChanged = (telNumber: string) => {

    if (intlTelInputRef.value) {
        console.log('intlTelInputRef.value IS ACCESSIBLE. Logging its content:');
        console.dir(intlTelInputRef.value); // Use console.dir for better object inspection

        console.log('Direct keys on intlTelInputRef.value:', Object.keys(intlTelInputRef.value));

        if ('intlTelInput' in intlTelInputRef.value) {
            console.log('SUCCESS: "intlTelInput" property FOUND on intlTelInputRef.value.');
            console.log('intlTelInputRef.value.intlTelInput IS:', intlTelInputRef.value.intlTelInput);
            console.dir(intlTelInputRef.value.intlTelInput); // Inspect this object

            if (intlTelInputRef.value.intlTelInput && typeof intlTelInputRef.value.intlTelInput === 'object' && 'instance' in intlTelInputRef.value.intlTelInput) {
                console.log('SUCCESS: "instance" property FOUND on intlTelInputRef.value.intlTelInput.');
                console.log('INSTANCE IS:', intlTelInputRef.value.intlTelInput.instance);
                // Now you can try to use it:
                // const itiInstance = intlTelInputRef.value.intlTelInput.instance;
                // const countryData = itiInstance.getSelectedCountryData();
                // console.log('Country Data:', countryData);
            } else {
                console.error('ERROR: "instance" property NOT FOUND or not as expected on intlTelInputRef.value.intlTelInput.');
                if (intlTelInputRef.value.intlTelInput && typeof intlTelInputRef.value.intlTelInput === 'object') {
                    console.log('Keys on intlTelInputRef.value.intlTelInput:', Object.keys(intlTelInputRef.value.intlTelInput));
                }
            }
        } else {
            console.error('ERROR: "intlTelInput" property NOT FOUND on intlTelInputRef.value.');
            console.log('This means the component is not exposing "intlTelInput" as documented.');
            // You might want to see if the instance is exposed directly, e.g.
            if ('instance' in intlTelInputRef.value) {
                console.log('Found "instance" directly on intlTelInputRef.value:', intlTelInputRef.value.instance);
            }
        }
    } else {
        console.error('ERROR: intlTelInputRef.value is null or undefined at the time of onTelNumberChanged.');
        console.log('This suggests the ref is not correctly attached or the event is firing before the ref is set.');
    }

}

console output:

[jackocnr]

Apologies for the delay in getting to this - life has been getting in the way.

Any thoughts from our Vue team? @carlssonemil @joaovinicius @mdpoulter @bettysteger

[carlssonemil]

I can get the dial code using the following code:

<script setup>
import { ref } from "vue";
import IntlTelInput from "intl-tel-input/vueWithUtils";

const intlTelInputRef = ref(null);

const onTelNumberChanged = () => {
  console.log(intlTelInputRef.value.instance.selectedCountryData.dialCode);
};
</script>

<template>
  <form>
    <IntlTelInput
      ref="intlTelInputRef"
      @changeNumber="onTelNumberChanged"
    />
  </form>
</template>

In your code above you're not importing ref, maybe that's the issue? 🤔 Otherwise I'm not sure why it's not working.

[jackocnr]

I'll close this for now, but do let us know if you're still having problems.