vuejs default properties set from vue-i18n

Question

I would like to set a default property from dictionary like this:

  props: {
    title: {
      type: String,
      default: this.$t("basic.confirm"),
    },
    description: {
      type: String,
    }
  }, ...

The $t is a vue-i18n, and I would like to set my title from dictionary, if its not defined in the parent class. But I got error:

Uncaught TypeError: this.$t is not a function

Similar error If I reload without this.

Uncaught ReferenceError: $t is not defined

But If I log out this value in the mount method it works well.

Is there a solution of setting default property from the dictionary?

Thanks in advance!

how do you do the same in compositio api – Salil Rajkarnikar Aug 10 '22 at 06:48 — Salil Rajkarnikar, Aug 10 '22 at 06:48

artoju · Answer 1 · 2018-11-06T12:21:54.760

38

One solution is to have the key or part of it as default props like

title: {
   type: String,
   default: "basic.confirm", //or "confirm"
 },

and in template:

<h1>{{ $t(title) }}</h1> //or $t("basic." + title)

edit: you can access $t inside function

title: {
  type: String,
  default: function () {
    return this.$t("basic.confirm")
  }
},

edited Nov 06 '18 at 12:21

answered Nov 06 '18 at 11:45

artoju

1,612
12
12

1

its not a bad idea! – LakiGeri Nov 07 '18 at 08:20
14

note that arrow syntax doesn't work: `default: () => { this.$t("basic.confirm") }`, but function syntax above does. – LaurelT Apr 11 '19 at 23:24
1

@LaurelT your arrow function is not returning the value `default: () => this.$t("basic.confirm")` – Th3Cod3 Mar 12 '21 at 10:36
1

Keep in mind the context of this. https://stackoverflow.com/a/60547546/10598904 – Th3Cod3 Mar 12 '21 at 10:53

score -1 · Answer 2 · answered Aug 22 '21 at 03:18

One solution is to have the key or part of it as default props like

 title: {
   type: String,
   default: "", 
 },

and in template:

    <h1>{{ $t(titlep) }}</h1>

and in script:

    import { useI18n } from 'vue-i18n'
    ...
    setup(props) {
      const { t }  = useI18n()
      const titlep = computed(() =>
        props.title ? props.title : t('basic.confirm')
      )
      return { titlep }
    }

vuejs default properties set from vue-i18n

2 Answers2