Область действия "this" в Vue проекте TypeScript - PullRequest
Новая
       42

Область действия "this" в Vue проекте TypeScript

0 голосов
/ 14 января 2020

У меня следующий код с i18n в таблице. vue: 

<template>
  <div :data="artikel">
    <b-table
      ...
      :fields="fields"
      ...
    ></b-table>
  </div>
</template>

@Component({
  name: 'Table',
})
export default class Table extends Vue {
  ...
  public fields:field[] = [
  {
    key: 'pn_document_id',
    label: 'id',
    class: 'text-left',
    sortable:true
  },
  {
    key: 'url',
    label: this.$i18n.t('image').toString(), // <--- works fine
    class: 'text-center'
  },
  ...
}

Я хочу поместить поля (publi c fields: field []) во внешний файл. Поэтому я создал fields.ts со следующим содержимым: 

import { field } from '@/types/interfaces';

export let fields: field[] = [
  {
    key: 'pn_document_id',
    label: 'id',
    class: 'text-left',
    sortable:true
  },
  {
    key: 'url',
    label: this.$i18n.t('image').toString(), // <--- this does not work, "this" does not related to vue
    class: 'text-center'
  },
...

Проблема в том, что я не могу сказать Vue / TypeScript, что у меня есть это "this" в файле импорта. Как мне это сделать?

1 Ответ

0 голосов
/ 14 января 2020

Нельзя использовать this для ссылки на компонент Vue вне определения компонента. Но вы можете использовать vue-i18n глобальный объект 

// setup-vue-i18n.js
const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

export default i18n

// fields.ts
import i18n from `setup-vue-i18n`

export let fields: field[] = [
  {
    key: 'pn_document_id',
    label: 'id',
    class: 'text-left',
    sortable:true
  },
  {
    key: 'url',
    label: i18n.t('image').toString(),
    class: 'text-center'
  }
]
...