1

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'})

为什么我需要这个

  1. 我必须从中注入一些数据promise来vue-i18n转换动态值。

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



编辑：

第二种情况解决了。

4

2 回答 2

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
    },
于 2020-02-01T09:07:14.683 回答
0

跟着进去就行 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%'
},
于 2017-10-16T12:22:29.607 回答