paul-thebaud / v-phone-input

International and accessible phone input for Vuetify 3 and Vue 3.
https://paul-thebaud.github.io/v-phone-input/
MIT License
65 stars 6 forks source link

question: when country is guessed, it will no effect on selected country #18

Closed mbscreater closed 10 months ago

mbscreater commented 10 months ago

Hi...! When country is guessed, it will no effect on selected country:

<script setup>
// ...
  const guessedCountry = ref();
  const guesser = new MemoIp2cCountryGuesser();
  onBeforeMount(()=>{
      guesser.guess().then(
          (res)=>{
              guessedCountry.value = res;
              // console.log('defaultCountry:', guessedCountry)
              // console.log('guessedCountry:', guessedCountry.value)
          },
      );
  });
</script>

<template>
<!--      ...       -->

Guessed Country Is: {{ guessedCountry }}

    <v-phone-input
        v-model="phone"
        :readonly="loading"
        variant="solo"
        :default-country="guessedCountry"
    ></v-phone-input>

<!--      ...       -->
</template>

image

mbscreater commented 10 months ago

🤩 I found the solution! 😇 I should use :country instead of :default-country. So this is the corrected code:

    <v-phone-input
        v-model="phone"
        :readonly="loading"
        variant="solo"
        :country="guessedCountry"
    ></v-phone-input>
paul-thebaud commented 10 months ago

Thank you for submitting the issue and answering your own question! :tada: