我正在尝试使用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/狼/index.就是
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'
}
}
}
}
你可以把你的翻译功能放到headerCell插槽中。将函数放在Activity.vue中的headers:
对象中时,它将无法正常工作,只需将转换键放在那里并使用带插槽的模板即可。
<v-data-table>
....
<template slot="headerCell" slot-scope="props">
{{ $t(props.header.text) }}
</template>
....
您可以将标头放在计算函数中。当本地更改时,标题将更新
computed:{
headers(){
return [
{ text: 'ID', value: 'id', width: '1%', align: 'left' },
{ text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
...
]
}
...
}