Update b-table column labels when switching display language

The solution provided in #1687 doesn’t seem to work anymore. I’ve put fields as a function into the computed area and I’m calling a method, which returns the column name. When I change the language by calling this.$i18n.i18next.changeLanguage(locale), it changes everything but the table header. Sometimes, they don’t change at all, and sometimes they get replaced with the translation path. The error sometimes fixed itself after hitting F5.

When adding a console.log to the getColLabel method, I can see, that it is not called when updating the language.

I’m using vue-i18next in combination with backend loading:

computed: {
  fields() {
	return [
	  {
		key: 'article',
		label: this.getColLabel('article')
	  },
	  {
		key: 'typeCode',
		label: this.getColLabel('typeCode')
	  },
	  // ...
	];
  }
},
methods: {
  getColLabel(colName) {
    return this.$i18n.t('yourApplication.affectedProducts.table.columns.' + colName);
  }
}

import i18next from 'i18next';
import VueI18Next from '@panter/vue-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';
import YAML from 'js-yaml';

Vue.use(VueI18Next);

i18next
  .use(XHR)
  .use(LanguageDetector)
  .init({
    ns: ['main', 'order'],
    defaultNS: 'order',
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.yaml',
      parse: data => YAML.safeLoad(data)
    }
  });

const i18n = new VueI18Next(i18next);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  template: '<App/>',
  components: {
    App
  }
})

[tmorehouse]

Convert your computed property to method to force it to be called each render (as long as changing the language will cause your app/component to re-render). Vue caches the results of computed properties, and only updates them when reactive data changes them. Although this method will be called anytime something triggers the table to re-render (so its not very efficient)

Another solution is to read in a reactive prop (that specifies your language has changed) at the top of the computed prop (i.e. assign it to a const). This will ensure that the computed prop is re-evaluated by Vue each time the language changes. i.e.:

{
  // ...
  computed: {
    fields() {
      // Accessing this.$i18n.locale in this computed prop tells Vue that
      // this computed prop should update whenever this.$i18n.locale
      // changes it value, even though we don't use the value.
      const lang = this.$i18n.locale
      // We add the following just so that minification optimizers
      // do not remove the above statement because the return value isn't used.
      if (!lang) { return [] }
      // Return the array of translated values
      return [
        { key: 'article', label: this.getColLabel('article') },
	{ key: 'typeCode', label: this.getColLabel('typeCode') },
	  // ...
	]
    }
  }

[tmorehouse]

They must have not set this.$i18n.i18next.language to be an observable (i.e. reactive) in i18next.