如何在v-for中正确使用i18n变量渲染select下拉选项？

你的写法不生效主要有两个问题：

• 模板属性内双引号嵌套冲突：v-for="item in $t("register")" 中内层双引号会和v-for属性的外层双引号提前闭合，直接导致模板解析失败
• 遍历逻辑错误：$t("register") 返回的是当前语言下register字段对应的整个键值对对象（即你语言包里{option_Germany: "Alemania", option_Morocco: "Marruecos"...}的结构），直接用单参数遍历对象不符合v-for的遍历规则，拿不到你要的选项内容

1. 修正模板写法 #

修正引号嵌套问题，同时使用v-for遍历对象的标准语法，分别获取选项的显示文本和对应键名：

<select v-model="formData.country">
  <option
    v-for="(optionText, optionKey) in $t('register')"
    :key="optionKey"
    :value="optionKey"
  >
    {{ optionText }}
  </option>
</select>

语法说明： #

• 把$t()的参数改用单引号包裹，避免和外层属性的双引号冲突
• 遍历对象时，第一个参数optionText是翻译后的显示文本（比如西班牙语环境下对应"Alemania"、"Marruecos"等内容），第二个参数optionKey是语言包中固定的键名（比如option_Germany、option_Morocco）
• :value绑定optionKey是推荐写法：不管用户切换到什么语言，表单提交的字段值都是固定的键名，不会随语言变化；如果业务需要提交显示的文本内容，把:value改为绑定optionText即可

2. 异步加载兜底处理 #

因为你的语言包是通过接口异步加载的，为了避免首次渲染时语言包还没加载完成，$t('register')返回原始字符串导致遍历报错，可以做一层兜底：

• 方案一：i18n初始化时给各语言的register字段预设空对象

// i18n初始化配置
new VueI18n({
  locale: 'en',
  messages: {
    en: { register: {} },
    fr: { register: {} },
    nl: { register: {} },
    es: { register: {} }
  }
})

• 方案二：在select标签上加渲染判断，确认拿到对象类型数据再渲染选项

<select v-model="formData.country" v-if="typeof $t('register') === 'object'">
  <!-- 选项内容同上 -->
</select>

内容的提问来源于stack exchange，提问作者Dimitri Leduc