Vue 2 i18n多按钮本地化切换问题咨询

核心思路 #

不在moduleButtons中存储固定文本，而是保存对应多语言文件的键名，在模板里动态调用$t()方法渲染文本，这样切换语言时所有按钮标签会自动同步更新。

具体步骤 #

1. 调整moduleButtons的数据结构
   把原本存固定标题的title字段替换为多语言键名，示例：

data() {
  return {
    moduleButtons: [
      { i18nKey: 'menu.modules.production', icon: 'el-icon-s-data' },
      { i18nKey: 'menu.modules.quality', icon: 'el-icon-s-check' },
      { i18nKey: 'menu.modules.inventory', icon: 'el-icon-s-shop' }
      // 新增按钮只需添加对应i18n键和配置
    ]
  }
}

2. 模板中动态渲染多语言文本
   通过v-for遍历按钮时，调用$t(btn.i18nKey)动态获取当前语言下的文本：

<el-button 
  v-for="btn in moduleButtons" 
  :key="btn.i18nKey" 
  :icon="btn.icon"
>
  {{ $t(btn.i18nKey) }}
</el-button>

3. 确保多语言配置文件包含对应键值
   以中文（zh-CN）和英文（en-US）为例：

• 中文语言包：

// src/lang/zh-CN.js
export default {
  menu: {
    modules: {
      production: '生产模块',
      quality: '质检模块',
      inventory: '库存模块'
    }
  }
}

• 英文语言包：

// src/lang/en-US.js
export default {
  menu: {
    modules: {
      production: 'Production',
      quality: 'Quality',
      inventory: 'Inventory'
    }
  }
}

问题原因说明 #

• {{btn.title}}无效：title是静态文本，初始化后不会随语言切换自动更新，未绑定多语言的响应式逻辑。
• 直接写$t('menu.modules.production')导致标签一致：所有按钮调用同一个多语言键，自然渲染相同文本。

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