如何翻译 Quasar 组件？答案

【问题标题】：How do I translate Quasar component?如何翻译 Quasar 组件？
【发布时间】：2020-06-11 08:12:08
【问题描述】：

我有一个使用 i18n 的 Vue/Quasar 应用程序，但现在我遇到了一个问题：表格页脚没有被翻译。例如，在表头中，我会这样做来翻译列名：

{
  align: 'left',
  field: (val) => val,
  label: this.$t('locale.column'),
  name: 'column',
  required: true,
  sortable: true,
},

其中 $t 是 18n 函数，语言环境是我的组件，而列实际上是列的名称。我无法直接访问表格的页脚（分页和元素的总数所在的位置）并且它没有被翻译。我也使用 Quasar 语言包，quasar.js 是这样的：

import en from 'quasar/lang/en-us.js'
/*
  import other languages
*/
import {
  state,
} from '@state/modules/i18n';

const locale = state.locale;
const langDictionary = {
  // all the imported langs go here
};

Vue.use(Quasar, {
  config: {},
  components: { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {
    Cookies,
    Dialog,
    Loading,
    Notify,
  },
  lang: langDictionary[locale]
});

export {langDictionary};

【问题讨论】：

标签： vue.js internationalization quasar-framework

【解决方案1】：

您可能在启动时将语言正确设置为lang: langDictionary[locale]。如果您稍后更改应用程序中的语言状态，如果您希望 Quasar 组件和插件得到正确翻译，您还需要通知 Quasar。请参阅文档Change Quasar Language Pack at Runtime 了解如何实现这一点，有关语言包的文档还包括动态加载语言包的提示。

您没有指定如何更改应用中的语言，因此我无法给出基于此的示例。

【讨论】：