(BUG) Wrong country for v-model input
Pezhvak opened this issue · comments
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.
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
hey, sorry i have tried that already, i forgot to mention that in the issue. waiting for your respond, thanks @LouisMazel
@LouisMazel hey, any update on this issue?
@LouisMazel it's working fine when you're typing it, lease try initializing it with the given phone number
Check this example: https://codesandbox.io/s/mazphonenumberinput-check-iran-wtndi
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 "+380683131333" return wrong number with Russia instead of Ukraine.
@LouisMazel please try enter number +380683122333 for example and check that country doesn't changes. it should be Ukraine.
@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?
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?
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 found solution. I had changed plugin to another one :)
It seems like no one cares about this bug
@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
You can bypass this using Vue refs and saving chosen country
...
...
...
<VuePhoneNumberInput
v-model="numberModel"
ref="phoneInputRef
/>
...
...
...
mounted() {
this.$refs.phoneInputRef.countryCode = 'UA'
}
...
...
...
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 thedefault-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.
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.