Scope of "this" in Vue TypeScript project

Question

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?

Michal Levý · Accepted Answer · 2020-01-14 20:56:26Z

1

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

answered Jan 14, 2020 at 20:56

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manium Over a year ago

Now i get error in fields.ts "Could not find a declaration file for module './setup-vue-i18n'."

Manium Over a year ago

I got the solution. I have imported i18n.ts (comes from ./src/i18n.ts after 'vue add i18n') in fields.ts as "import i18n from '@/i18n'". Thanks for the tip

Collectives™ on Stack Overflow

Scope of "this" in Vue TypeScript project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related