Views: 516
Last Modified: 28.04.2022

  Class $Bitrix.Loc

Class allows to organize the handling of localizations in Vue components (in application, created via BitrixVue.createApp).

Методы $Bitrix.Loc
$Bitrix.Loc.getMessage Method returns language phrase by ID.
$Bitrix.Loc.getMessages Method gets all language phrases, available within Vue application.
$Bitrix.Loc.setMessage This method can set language phrases for Vue application.

Also, the article describes the method BitrixVue.getFilteredPhrases that reads the object BX.message and selects only the phrases related to your Component to be used in the template (selection is performed by prefix).

$Bitrix.Loc.getMessage

Method returns language phrase by ID.

this.$Bitrix.Loc.getMessage(name: string, replacements?: {[key: string]: string}): string;

Parameters:

Parameter Description
name Phrase string ID.
replacements Object with replacements. Allows to replace placeholders with required data (optional parameter, supports reactive properties).

Use inside template:

In text interpolation format:

template: `
	UserId is {{ $Bitrix.Loc.getMessage('USER_ID') }}
`

In template parameters:

template: `
	<div :title="$Bitrix.Loc.getMessage('FD_LAST_SEEN_MORE_YEAR')">Hover me</div>
`

Please note: function supports a second parameter with replacements. When use method in template or calculated property, replacements will be reactive:

const Counter = {
	data()
	{
		return {
			counter: 0
		}
	},
	created()
	{
		setInterval(() => this.counter++, 1000);
	},
	// language=Vue
	template: `
		{{$Bitrix.Loc.getMessage('DEMO_COUNTER', {'#COUNTER#': this.counter})}}
	`
};

Use in component:

Access to functions inside the component is performed in the same manner as in any other variable: via this.. There are nuances of use, however, in the hook beforeCreate and specifics of use are indicated in chapter description.

created()
{
	const message = this.$Bitrix.Loc.getMessage('EXAMPLE_PHRASE');
}

beforeCreate()
{
	const message = this.$bitrix.Loc.getMessage('EXAMPLE_PHRASE');
}

computed: {
	counter()
	{
	    return this.$Bitrix.Loc.getMessage('DEMO_COUNTER', {'#COUNTER#': this.couter});
    }
}

$Bitrix.Loc.getMessages

Method for getting all language phrases, available within Vue application.

this.$Bitrix.Loc.getMessages(): object

$Bitrix.Loc.setMessage

This method can set language phrases for Vue application.

Note: Language phrases from components are set automatically and you won't need to set them manually.

If your component operates not only inside Bitrix24 but also as an external widget (online forms, online chat widget), you have to use this method for Vue application to have access to language phrases.

this.$Bitrix.Loc.setMessage(id: string | {[key: string]: string}, value?: string): void;

Parameters:

Parameter Description
id Phrase string ID.
value Phrase value (localization).

Possible variant for calling the method, when the function's first parameter passes the localization object in the format {key1: "value1", ...}

Example:

Access to functions inside the component is performed in the same manner as to any other variable - via this.. There are, however, nuances of use in the hook beforeCreate. You can find details in the chapter description.

beforeCreate()
{
    this.$bitrix.Loc.setMessage('DEMO_COUNTER', 'Counter: #COUNTER#');
	
    this.$bitrix.Loc.setMessage({
        DEMO_COUNTER: 'Счетчик: #COUNTER#',
        DEMO_PHRASE_2: 'Фраза 2',
    });
}

BitrixVue.getFilteredPhrases

The method BitrixVue.getFilteredPhrases reads the object BX.message and selects only the phrases related to your component (selected by prefix) for subsequent use in the template.

This method is rarely used. One of examples is described in the article: Handling localizations.

BitrixVue.getFilteredPhrases(phrasePrefix: string|Array<string>, phrases?: object|null): ReadonlyArray<any>;

Parameters:

Parameter Description
phrasePrefix Phrase prefix. All phrases, started from with this prefix will be returned in the result. In addition to the indicated string, there is no more option to handle array with prefixes, for example, ['PREFIX_1', 'PREFIX_2'].
phrases Arbitrary set of phrases, optional field. By default, uses the object BX.message. If you use the component as an external widget, then pass this to this parameter (vue component context).

Result:

ReadonlyArray – returns frozen (Object.freeze) localization object, filtered by specified prefix.

Example:

import {BitrixVue} from 'ui.vue3';

const Component = {
	...
	computed: 
	{
		localize()
		{
			return BitrixVue.getFilteredPhrases('PREFIX_');
		}
	},
	...
	
	template: `
		{{ localize.PREFIX_PHRASE_1 }}
	`
};





Courses developed by Bitrix24