CODEWITHSUNDEEP
typescriptvue.jsvue-componentvuejs3
Dain Verd
Dain Verd

Reputation: 53

Using vue3-tel-input. Why :defaultCompany prop not setting country

I am using for my form vue3-tel-input. So I want to display phone number(on buttons click make form from view-mode to edit-mode). I get proper ISO codes from telephone number. Number is got from request.

So the problem is I cannot change defaultCompany in component. So if number is from country A it will show number from country B.

If I make prop dinamic and pass into it variable what contains ISO country code it does nothing at all. Please help be set default country by ISO code.

Here code itself

<vue-tel-input
    :value="phone"
    @input="onInput"
    :defaultCountry="countryISO"
  ></vue-tel-input>

// in code section

data() {
    return {
      phone: "+79991234567",
      countryISO: "AU",
    };
  },

here demo

I am expecting to set default country of vuejs element by dynamic prop.

Upvotes: 1

Views: 478

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The phone number should be a valid number for that country :

<vue-tel-input
    :value="phone"
    @input="onInput"
    :defaultCountry="countryISO"
  ></vue-tel-input>

// in code section

data() {
    return {
      phone: "+213659451236",
      countryISO: "DZ",
    };
  },

or you init phone with empty string :

<vue-tel-input
    :value="phone"
    @input="onInput"
    :defaultCountry="countryISO"
  ></vue-tel-input>

// in code section

data() {
    return {
      phone: "",
      countryISO: "PS",
    };
  },

Upvotes: 1

Related Questions