9

i'm new to vue-i18n, seams great, but have some challenge getting it to work probably.

All template translations are updated as expected when changing locale, but when

script

data() {
  return {
    locales: {
      en: this.$i18n.t('topnav.lang.english'),
      da: this.$i18n.t('topnav.lang.danish'),
      sw: this.$i18n.t('topnav.lang.swedish'),
      no: this.$i18n.t('topnav.lang.norwegian'),
    }
  }
},

template

WORKING

{{$t('topnav.lang.english')}}

NOT WORKING

<a class="dropdown-item">{{locales.en}}</a>

NOT WORKING

<a class="dropdown-item" @click="changeLocale(key)" v-for="(value, key) in locales">{{value}}</a>

i have tried a lot of things, eg. lazyload the languages files and so on, but with no luck.

pkdkk
  • 3,905
  • 8
  • 44
  • 69
  • 1
    It happens because {{$t('topnav.lang.english')}} equals this.$t('topnav.lang.english') and not this.$i18n.t('topnav.lang.english'). – Máté Wiszt Aug 29 '18 at 12:12

1 Answers1

17

change from data to computed, data is not inherently reactive but luckily computed is!

the alternative is to directly put your translation in the template if you do not want to use computed

Zain Wania
  • 186
  • 1
  • 2