CODEWITHSUNDEEP
typescriptvue.jsscopevue-i18n
Manium
Manium

Reputation: 65

Scope of "this" in Vue TypeScript project

I have following code with i18n in Table.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'
  },
  ...
}

I want to put the fields (public fields:field[]) to external file. So i created fields.ts with following content:

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

The problem is, i can't tell Vue/TypeScript that i have this "this" in import file. How do I do this?

Upvotes: 0

Views: 612

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

You can not use this to reference Vue component outside of the component definition. But you can use vue-i18n global object 

// 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'
  }
]

Upvotes: 1

Related Questions