使用vue3-tel-input动态设置defaultCountry属性无效求助

问题核心 #

defaultCountry属性仅在组件初始化阶段生效，后续动态修改该属性不会触发组件更新选中的国家，这就是你看到手机号对应A国但组件显示B国的原因。

可行解决方案 #

1. 调用组件内置的setCountry方法（推荐）

通过ref获取组件实例，直接调用内部方法设置国家，无需重新渲染组件：

<vue-tel-input
  ref="telInputRef"
  :value="phone"
  @input="onInput"
></vue-tel-input>

data() {
  return {
    phone: "+79991234567",
    countryISO: "AU",
    telInputRef: null
  };
},
methods: {
  // 切换编辑模式或获取到新数据时调用
  updateDefaultCountry() {
    this.telInputRef.setCountry(this.countryISO);
  },
  onInput(value) {
    this.phone = value;
  }
}

当你从接口拿到新的countryISO后，执行updateDefaultCountry()即可同步选中的国家。

2. 利用key强制组件重新初始化

给组件绑定key属性，当countryISO变化时，key同步更新，触发组件重新创建，此时defaultCountry会生效：

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

这种方法简单直接，但会销毁并重建组件，适合场景简单的情况。

3. 使用v-model:country绑定国家对象（需组件版本支持）

部分版本的vue3-tel-input支持双向绑定国家对象，直接修改对象的iso属性即可同步组件选中状态：

<vue-tel-input
  :value="phone"
  @input="onInput"
  v-model:country="selectedCountry"
></vue-tel-input>

data() {
  return {
    phone: "+79991234567",
    selectedCountry: { iso: "AU" }
  };
},
// 获取到新ISO码时
this.selectedCountry = { iso: "US" }; // 直接替换对象触发响应式更新

内容的提问来源于stack exchange，提问作者Dain Verd