Question

我正在尝试使用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'
      }
    }
  }
}

Answer 1

您可以将翻译功能放入headerCell插槽。将函数放在Activity.vue的headers:对象中时，仅将翻译键放在此处并使用带有插槽的模板，就无法使用。

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

Answer 2

您可以将标题放入计算函数中。当本地更改时，标题将被更新

SomeObject

Vuetify数据表标头的国际化

2 个答案: