Vue-i18n: V-T directive not reactive with locale change

[ghost]

When we use the directive <span v-t="'path'"></span> , translation is not reactive when the locale of i18n changed.

Fiddle example

[DorianGrey]

I've found that it works when explicitly setting the locale in the binding, something like:

v-t="{path: 'header.demo-app', locale: this.$i18n.locale}"

Updated fiddle example: https://jsfiddle.net/70ruLmdx/2/

However, I'm not sure about the performance impact, i.e. if this version would still perform better than using $t.

[willin]

@DorianGrey write too long this way.

[ar53n]

I have problem when in component only directives. Sidebar is named router-view. My sidebar not translated when i change language.
But if i add $t('common.eventLog') everything will be work good.

<template>
    <el-menu :router="true">
        <el-menu-item index="" @click="back()">
            <template slot="title">
              <i class="el-icon-arrow-left"></i>
              <span v-t="'common.back'"></span>
            </template>
          </el-menu-item>
        <el-menu-item index="1" :route="{name: 'Account'}" v-t="'common.summaryInfo'"></el-menu-item>
        <el-menu-item index="2" :route="{name: 'EventLog'}" v-t="'common.eventLog'">

        </el-menu-item>
    </el-menu>
</template>

<script>
export default {
    name: 'ProfileSidebarMenu',
    data() {
        return {
            backUrl: ''
        };
    },
    beforeRouteEnter(to, from, next) {
    },
    methods: {
        back() {
        }
    }
};
</script>

[wolfgang-braun]

@ar53n
To change your locale the main components method should look like this:

methods: { changeLanguage (code) { this.$i18n.locale = code this.$forceUpdate() }

Without this.$forceUpdate() you have to use $t('foo.bar')

This works for me also in combination with sidebars, dialogs v-if, v-show etc.

[austi10]

I'm facing a similar problem that @ar53n mentioned above. I am using vuetify toolbar for representing a navbar. When I select a flag from the drop down menu of this navbar, the translations for the toolbar items are not performed for this component (which is not specified in the router view of the App component) alone, however the other components (which reside inside the router-view) are translated.
I am using v-t directive. Although $t/$tc work fine, but I would rather prefer to use v-t directive due to its caching advantage in my application. Using object syntax for v-t directive works by specifying the locale as following

v-btn v-t="'{path: 'Navbar.Option', locale: this.$i18n.locale}'"

However I do not want to include locale property each and everytime into my HTML templates, which only includes redundancy

[anzuj]

@austi10 probably way too late, but to solve the reactivity problem you may just use v-textdirective instead. Solution nr 5 here.