Vue-i18n change locale not updating everything

vue.js vue-i18n
pkdkk picture pkdkk · Aug 29, 2018 · Viewed 7.7k times · Source

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.

Answer

Zain Wania picture Zain Wania · Sep 27, 2018

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

Related questions

Push a route (Moving from vueJS to nuxtJS)

I am converting a VueJS project to Nuxt.js and I have a problem understanding how nuxt handles routing. Its documentation doesn't say anything about Pushing a route. Using VueJS I have the following in a component. //template <input …

Read More
Vue-i18n 'Cannot read property '_t' of undefined at Proxy.Vue.$t'

Having issues incorporating vue-i18n into my app. Used this page as inspiration. <b-navbar-nav class="ml-auto" > <b-nav-item-dropdown :text="display_name" right> <b-dropdown-item disabled>{{ $t('username') }}: {{ username }}</b-dropdown-item> <b-dropdown-item disabled>Organisation: {{ …

Read More
Vue-i18n - Cannot read property 'config' of undefined

First of all I show you what works (in App.js) import router from './routes.js'; import VueI18n from 'vue-i18n'; const messages = { en: { message: { hello: 'hello world' } } } // Create VueI18n instance with options const i18n = new …

Read More