(BUG) Wrong country for v-model input

[Pezhvak]

In the new version once a value is provided with v-model it cannot detect the right country code. try: 989125555555, it should pick Iran, but it doesn't. instead it picks up +1 for the country code.

[Mazel]

Hi @Pezhvak,

I think, you should provide a phone number with the calling code (+98)

But anyway, I will inspect this "bug". I keep you in touch

[Pezhvak]

hey, sorry i have tried that already, i forgot to mention that in the issue. waiting for your respond, thanks @LouisMazel

[Pezhvak]

@LouisMazel hey, any update on this issue?

[Mazel]

It's works fine for me, see:

[Pezhvak]

@LouisMazel it's working fine when you're typing it, lease try initializing it with the given phone number

[Mazel]

Check this example: https://codesandbox.io/s/mazphonenumberinput-check-iran-wtndi

[Artyom]

The same problem. @Pezhvak Did you find way to figure this out ? When I got phone number from API and set it to v-model select can't choose right country, for example "[phone]" return wrong number with Russia instead of Ukraine.

[Artyom]

@LouisMazel please try enter number [phone] for example and check that country doesn't changes. it should be Ukraine.

[Evaldas]

@LouisMazel I'm having a some problem as @Pezhvak, so that it doesn't detect country code when initializing field from API. Are there any plans for fixing it?

[paulogil2010]

Any news about this?
isn't it awkward to pass country code with phone number and cc be showed two times, one with flag and with the number itself?

[Jake]

Has anyone found a way around this? As far as I can see the only way would be to store the country code as letters (e.g. "FR", "BE" etc.) along with the number and then supply that as the default-country-code prop while passing in the national number as v-model. I'm assuming this isn't how it's supposed to work as it makes it really cumbersome to use for editing existing data.

@Pezhvak You say this is an issue in a new version. Was it working in an older version?

[Artyom]

I found solution. I had changed plugin to another one :)
It seems like no one cares about this bug

[Jake]

@temofart Ha! That's fair. Can you recommend a replacement?

[Artyom]

@temofart Ha! That's fair. Can you recommend a replacement?

Sure, https://www.npmjs.com/package/vue-phone-mask-input . You can add your own styles to make it better but on JS side it works perfect

[Valentyn Tolochko]

You can bypass this using Vue refs and saving chosen country

...
...
...
 <VuePhoneNumberInput
      v-model="numberModel"
      ref="phoneInputRef
/>
...
...
...
mounted() {
  this.$refs.phoneInputRef.countryCode = 'UA'
}
...
...
...

[Pezhvak]

Has anyone found a way around this? As far as I can see the only way would be to store the country code as letters (e.g. "FR", "BE" etc.) along with the number and then supply that as the default-country-code prop while passing in the national number as v-model. I'm assuming this isn't how it's supposed to work as it makes it really cumbersome to use for editing existing data.

@Pezhvak You say this is an issue in a new version. Was it working in an older version?

I don't remember sorry, i couldn't find a solution so i used another library.

[Alexey Plodenko]

For me it is working this way.

On the initialization pass the country 2 letter code separately from the phone into the property default-country-code:
<vue-phone-number-input :default-country-code="phone_country" v-model="phone" @update="phone2Updated" />

Then use the method phone2Updated(data) and handle the user input.