vue-i18n 输出使用类星体数据表标题值答案

【问题标题】：vue-i18n output using as quasar data-table title valuevue-i18n 输出使用类星体数据表标题值
【发布时间】：2018-03-20 16:16:43
【问题描述】：

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

我需要知道，如何将$t('message.hello') 函数、v-html 或双括号{{ $t('message.hello') 中的实际内容放在变量中。我尝试在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%'
},

编辑：

第二种情况解决了。

【问题讨论】：

标签： laravel ecmascript-6 vue.js quasar vue-i18n

【解决方案1】：

如果您喜欢真正的反应性，您需要使用计算属性将 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
    },

【讨论】：

【解决方案2】：

只需在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%'
},

【讨论】：