Интернационализация заголовка таблицы данных Vuetify - PullRequest
Новая
       20

Интернационализация заголовка таблицы данных Vuetify

1 голос
/ 01 апреля 2019

Я пытаюсь интернационализировать заголовок таблицы данных, используя 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)
  }
})

. / Активы / языки / 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'
      }
    }
  }
}

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Вы можете поместить свою функцию перевода в слот headerCell. Он не будет работать, когда вы поместите функцию в объект headers: в Activity.vue, просто поместите туда свои ключи перевода и используйте шаблон со слотом. 

<v-data-table>
    ....
    <template slot="headerCell" slot-scope="props">
        {{ $t(props.header.text) }}
    </template>
    ....
0 голосов
/ 27 мая 2019

Вы можете поместить свой заголовок в вычисляемую функцию. Когда локальные изменения, заголовки будут обновлены 

computed:{

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