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:

    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-text directive instead. Solution nr 5 here.

[lgarczyn]

This bug is still active, not sure why the issue is closed

[bvargin-dev]

Hi, I'm encountering the same issue with vue(3.4.15), vuei-18n(9.9.1), vuetify(3.5.2).

With these versions, v-t directives are not updated when the language(locale) change is realized from another component.
By example, when locale is changed from a menu (v-app-bar component), the text in the menu is well translated (directives and {{ t(interpollation) }}) but the v-t directives are not translated in my sibling v-main component.

After playing a bit with interpollation and directives, I have observed that interpollation is always updated and react on any changes of the locale. But v-t directives were updated only on the next change of the same component.
In my case, I was putting the language in url like described in this documentation ),

As workaround, I have added something in the component using v-t directives in order to detect that locale is changing (it forces re-rendering of the component):

import { ..., watch, nextTick } from 'vue';
...
const { t, locale } = useI18n();
watch(locale, () => { return nextTick(); });`
return { t, locale };

Once it's in place, if I have added an interpollation in the template, then v-t is well updated too.

<!-- if both interpolation and directive are present, then directives are updated -->
      <span v-t="'main.menu.home'"></span>
      <span v-show="false">{{ locale }}</span>

change(locale) -> changer(url) -> wait a change in components to trigger re-rendering of v-t -> nextTick() -> re-render with good translation.

So unfortunately, without any other solution, I have added at least an invisible interpolation of the locale value in the template
(if no any other interpolation {{ t() }} is present in the same component) to trigger modification of the directives.

My understanding is that v-t directives do not react by principle to any changes in background, so we have to handle it by watching the locale value (only), otherwise we have to use interpollation.
I wish that if it does solve issue, it could help to understand why the v-t directives are not refreshed and I would enjoy if there are more elegant way of work. 😊

Thanks you.

Ps: For vue2, the concept would be similar by watching the "this.$i18n.locale" as it is mentioned by DorianGrey (and Austin10).