Views: 2521
Last Modified: 28.04.2022
Using localization in template ({{localize.CODE}})
BitrixVue 3 new version have the option to use localization inside components and template without preliminary prepared calculated property localize
.
Before:
template: `
<div>{{localize.CODE}}</div>
`
Now:
template: `
<div>{{$Bitrix.Loc.getMessage('CODE')}}</div>
`
You can find more details about localizations and the method $Bitrix.Loc.getMessage in the article: Class for handling localizations.
Using BitrixVue.getFilteredPhrases
Now this method is very rarely required. The case when it's required, is described in the article: Handling localizations.
If you still need it, some modifications are needed.
Before:
Vue.getFilteredPhrases('PREFIX_', this.$root.$bitrixMessages);
BitrixVue.getFilteredPhrases('PREFIX_1', this.$root.$bitrixMessages);
BitrixVue.getFilteredPhrases(['PREFIX_1_', 'PREFIX_2_'], this);
Now:
BitrixVue.getFilteredPhrases(this, 'PREFIX_1');
BitrixVue.getFilteredPhrases(this, ['PREFIX_1_', 'PREFIX_2_']);
List of changes:
- Set of parameters changed.
- Now you need to indicate just
this
when calling a method instead of global variable this.$root.$bitrixMessages
. Current component context within computed
of property localize
is understood under this
. Such format was used for external integrations (for example, widgets).
Setting external localizations (in $root component)
Previously, specifying external localizations (for external integrations) used the approach with indicating localizations in the global variable this.$root.$bitrixMessages
:
import {Vue} from 'ui.vue';
class TaskManager
{
...
attachTemplate()
{
const context = this;
this.vm = new Vue({
el: this.rootNode,
beforeCreate()
{
this.$bitrixApplication = context;
this.$bitrixMessages.PREFIX_CODE_1 = 'Message 1';
this.$bitrixMessages = {
'PREFIX_CODE_1': 'Message 1',
'PREFIX_CODE_2': 'Message 2',
};
},
template: '<module-component/>'
})
}
...
}
But now you have to use the class $Bitrix.Loc
:
import {BitrixVue} from 'ui.vue3';
class TaskManager
{
...
attachTemplate()
{
const context = this;
this.#application = BitrixVue.createApp({
beforeCreate()
{
this.$bitrix.Application.set(context);
this.$bitrix.Loc.setMessage('PREFIX_CODE_1', 'Message 1');
this.$bitrix.Loc.setMessage({
'PREFIX_CODE_1': 'Message 1',
'PREFIX_CODE_2': 'Message 2',
});
},
components: {
Component,
},
template: '<Component/>'
});
this.#application.mount(this.#rootNode);
}
...
}
Find more details on the new approach in the article: Class for handling localizations.