Vue.js结合i18n实现语言切换下拉菜单失效问题求助

核心问题1：事件绑定位置错误 #

你把@change事件绑定在了<option>标签上，但HTML里<option>本身不会触发change事件，这个事件应该绑定在<select>元素上——用户选择选项时，是<select>触发change事件，我们需要通过它获取选中的语言值。

核心问题2：<option>内嵌套无效标签 #

<option>只能包含纯文本内容，嵌套<a>或<strong>这类标签不符合HTML规范，浏览器会自动忽略这些元素，既达不到标记当前语言的效果，还可能引发渲染异常。

修正后的完整代码 #

模板部分：

<select v-if="languages" @change="handleLanguageChange">
  <option 
    v-for="(lngData, lng) in languages" 
    :key="lng"
    :value="lng"
    :selected="$i18next.resolvedLanguage === lng"
  >
    {{ lngData.nativeName }}
    <span v-if="$i18next.resolvedLanguage === lng">(当前)</span>
  </option>
</select>

脚本部分：

<script>
export default {
  name: 'TranslationShowCase',
  data () {
    return {
      languages: {
        en: { nativeName: 'English' },
        fr: { nativeName: 'Français' },
        es: { nativeName: 'Espanol' }
      }
    }
  },
  methods: {
    handleLanguageChange(event) {
      const selectedLang = event.target.value;
      // 切换语言并捕获可能的异常
      this.$i18next.changeLanguage(selectedLang).catch(err => {
        console.error('语言切换失败:', err);
      });
    }
  }
}
</script>

额外优化建议 #

如果需要给当前选中语言添加加粗样式，可以用动态class实现：

<option 
  v-for="(lngData, lng) in languages" 
  :key="lng"
  :value="lng"
  :selected="$i18next.resolvedLanguage === lng"
  :class="{ 'current-lang': $i18next.resolvedLanguage === lng }"
>
  {{ lngData.nativeName }}
</option>

然后添加样式：

.current-lang {
  font-weight: bold;
}

另外要确认i18n实例已正确配置，且对应语言的翻译资源文件（如en.json、fr.json）已加载完成，这是页面文本能切换的前提。

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