Vuetify 数据表头的国际化答案

【问题标题】：Internationalization of Vuetify data table headerVuetify 数据表头的国际化
【发布时间】：2019-04-01 17:28:46
【问题描述】：

我正在尝试使用 Vuetify + I18n 国际化我的数据表标题。

当我翻译我的普通代码时，它可以正常工作，但现在我需要翻译我用 Vuetify 构建的数据表的表头。

我已经尝试在标题中添加代码this.$vuetify.t('$vuetify.activity.username') 或this.$t('$vuetify.activity.username')，但没有任何反应。语言始终保持英语 (en)。

有人知道怎么解决吗？

我在我的代码下方发送。

提前谢谢你。

Activity.vue

export default {
  data () {
    return {
      headers: [
        { text: 'ID', value: 'id', width: '1%', align: 'left' },
        { text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
        ...
      ]
    }
  },
  ...
}

main.js

import messages from './assets/lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Vue.use(Vuetify)
Vue.use(Vuetify, {
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
})

./assets/lang/index.js

module.exports = {
  en: {
    ...
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        ...
      },
      ...
      activity: {
        username: 'Username'
      }
    }
  },
  pt: {
    ...
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Itens por página:',
        ...
      },
      ...
      activity: {
        username: 'Nome do usuário'
      }
    }
  }
}

【问题讨论】：

在您的 main.js 语言环境中，您提到了“en”。如果您将语言环境设置为“pt”，它是否会转换为“pt”？
是的，当我将语言环境设置为“pt”时，所有代码都会转换为“pt”。不幸的是，只是没有翻译的数据表标题。

标签： vue.js vuetify.js vue-cli vue-cli-3 vue-i18n

【解决方案1】：

您可以将标题放在计算函数中。当本地发生变化时，headers 会更新

computed:{

    headers(){
      return [
        { text: 'ID', value: 'id', width: '1%', align: 'left' },
        { text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
        ...
      ]
    }
...
}

【讨论】：

【解决方案2】：

对于 Vuetify 2.x

<v-data-table :headers="headers" ...

并放入计算数据

 computed: {   
    headers () {
      return [
        {
          text: this.$t('title'),
          align: 'left',
          sortable: false,
          value: 'title'
        },

对于 Vuetify 1.x

您可以将翻译功能放入 headerCell 插槽。将函数放在Activity.vue中的headers:对象中时它不起作用，只需将翻译键放在那里并使用带有插槽的模板即可。

<v-data-table>
    ....
    <template slot="headerCell" slot-scope="props">
        {{ $t(props.header.text) }}
    </template>
    ....

【讨论】：

很抱歉这么晚才回复。你的例子效果很好。非常感谢。