вывод vue-i18n с использованием в качестве значения заголовка таблицы данных квазара

Два способа объединить vue-i18n с quasar-framework в vue

Мне нужно знать, как поместить функцию $t('message.hello'), что на самом деле находится в v-html или в двойных скобках {{ $t('message.hello') в переменной. Пытался вернуть функцию в экземплярах computed:- и mounted(), также попытался поместить в window.var.

Другой вариант

И наоборот, мне нужно вставить vue обработанные переменные в метод $t('message.hello', {scope: 'world'}) следующим образом: $t('message.hello', {scope: 'returned.fromDataOrSomewhere'})

Зачем мне это

Мне нужно ввести данные из promise в vue-i18n, чтобы преобразовать динамические значения.

Мне нужно поместить переведенные значения в Quasar <q-datatable> какие столбцы настроены, как показано ниже:

{
  label: 'ID', //here I need a variable instead of string
  field: 'id',
  filter: true,
  sort: true,
  type: 'number',
  width: '10%'
},
{
  label: 'Username', //here too - and so on...
  field: 'username',
  filter: true,
  sort: true,
  type: 'date',
  width: '20%'
},

РЕДАКТИРОВАТЬ:

Второй случай решен.

Maximilian Fixl 09.10.2017 источник

Ответы (2)

arrow_upward
1
arrow_downward

Если вам нравится настоящая реактивность, вам нужно передать компоненту q-table v-bind: columns, используя вычисляемое свойство. Если вы используете данные, это не реактивность.

<q-table
  ...
  :columns="columnsI18n"
  ... 

<script>
. . .
computed: {
    columnsI18n () {
      let columns = [
        {
          name: 'username',
          required: true,
          label: this.$t('mailboxes.label'),  // Translation
          align: 'left',
          field: row => row.domain,
          format: val => `${val}`,
          sortable: true
        },
        {
          name: 'active',
          align: 'center',
          label: this.$t('domains.active'), // Translation
          field: row => row.active,
          format: val => String(!!val),
          sortable: true
        }
      ]
      return columns
    },

abkrim 01.02.2020

arrow_upward
0
arrow_downward

Просто используйте this в js. Потому что это внутри vue-instance и this-bind. вот почему вы должны поступить так:

{
  label: this.$tc('message.textA', 1),
  field: 'id',
  filter: true,
  sort: true,
  type: 'number',
  width: '10%'
},
{
  label: this.$tc('message.textB', 1),
  field: 'username',
  filter: true,
  sort: true,
  type: 'date',
  width: '20%'
},

Maximilian Fixl 16.10.2017