vue-i18n 输出使用 as quasar data-table 标题值

Question

在vue

中结合vue-i18n和quasar-framework的两种方式

我需要知道如何放置 $t('message.hello') 函数，v-html 或双括号 {{ $t('message.hello') 中的实际内容。我尝试将 return 函数放在 computed:- 和 mounted() 实例中，我还尝试将其放在 window.var 中。

其他变体

~~反过来，我需要像这样将 vue 渲染变量放入 $t('message.hello', {scope: 'world'}) 方法中：$t('message.hello', {scope: 'returned.fromDataOrSomewhere'})~~

为什么我需要这个

我必须在 vue-i18n 中注入一些来自 promise 的数据来转换动态值。

我需要将翻译后的值放入 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%'
},

编辑：

第二种情况解决

Answer 1

只需在 js 中选择 this。因为这是在 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%'
},

Answer 2

如果您喜欢真正的反应性，则需要使用计算的属性将 v-bind:columns 传递给 q-table 组件。如果你用一个数据是没有反应性的。

<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
    },

vue-i18n 输出使用 as quasar data-table 标题值

vue-i18n output using as quasar data-table title value

laravel

ecmascript-6

vue.js

quasar

vue-i18n

在vue

其他变体

为什么我需要这个

编辑：