如何在Vue.js模板中展示函数输出并实现英德locale切换功能

问题分析 #

你的现有代码存在3个核心问题导致无法正常运行：

1. 组件初始化时没有计算初始反向locale值，页面首次加载时链接文本为空
2. 切换逻辑仅覆盖了当前语言为en的场景，没有处理de的场景，也没有实际修改i18n.locale的取值
3. 点击<a>标签会触发默认跳转行为，可能干扰功能执行

修正后代码 #

<template>
    <a href="#home" @click.prevent="changeLocale">{{ notLocale }}</a>
</template>

<script>
import i18n from "../js/i18n";

export default {
  name: "navbar",
  data() {
    return {
      notLocale: ""
    }
  },
  mounted() {
    // 组件加载时初始化反向locale显示
    this.notLocale = i18n.locale === 'en' ? 'de' : 'en'
  },
  methods: {
    changeLocale: function () {
      // 切换i18n生效的locale
      i18n.locale = i18n.locale === 'en' ? 'de' : 'en'
      // 更新链接显示的反向locale
      this.notLocale = i18n.locale === 'en' ? 'de' : 'en'
    }
  }
}
</script>

改动说明 #

• 新增mounted生命周期钩子，组件加载完成后立即根据当前i18n的初始locale（即你配置的浏览器默认locale）计算并赋值反向显示文本，满足页面加载就显示正确内容的需求
• 给点击事件添加.prevent修饰符，阻止<a>标签的默认跳转行为
• 完善切换逻辑：点击时先修改全局i18n.locale的取值，再同步更新显示的反向文本，覆盖两种语言的切换场景

内容的提问来源于stack exchange，提问作者Artur Müller Romanov