I18N (интернационализация) может не иметь большого значения, когда вам нужно писать приложения только на английском языке, но в моей двуязычной стране упускать этот аспект никогда нельзя. Поскольку в последнее время я много работаю с Vue, я попытался создать свою первую форму с переведенными метками.

Используемая технология — ASP.NET MVC, поэтому нет Webpack и плагинов, и это то, что я нашел в 100% случаев при поиске «Vue + i18n»: использование плагина.

Прочитав исходный код этого плагина на GitHub, я создал что-то, что мог бы использовать в своих проектах MVC. В различных статьях, которые я нашел об этом, много раз возвращалось использование фильтра для отображения переводов для данного ярлыка, и это то, что я использовал и опишу во второй части этого сообщения в блоге.

Возможно, вы помните мой первый пост в блоге, описывающий создание Vue-компонента. Если нет, вы можете сначала прочитать это: https://medium.com/@kevin_cocquyt/vue-components-in-an-asp-net-mvc-app-e9eb0004c054.

Шаг 1 — Создание компонента

Я создал компонент, содержащий заголовок, элемент таблицы с элементами заголовка и одну строку с данными. Поскольку метки заголовков необходимо перевести, используется значение по умолчанию, за которым следует фильтр, в котором извлекается правильный перевод для данной метки. Затем этот фильтр указывается в самом компоненте, и внутри этой функции в списке переводов выполняется поиск метки, которая была передана в качестве параметра, и, когда она найдена, возвращается свойство-значение для этого элемента списка, в противном случае передается переданное значение. value (значение перед символом вертикальной черты) возвращается. Мне нужно передать список «ml» (подробнее об этом позже) для каждого вызова фильтра, поскольку фильтры не позволяют использовать свойства данных внутри них (это означает, что «this.ml» возвращает только значение null вместо фактического значение, в моем случае «ml» означает многоязычность).

Я мог бы назвать свой компонент «vue-table-component», что было бы более уместно, но мне лень менять скриншоты (а уже 23:00) :)

Шаг 2 — Регистрация компонента

Регистрация необходима для двух вещей: во-первых, вы можете убедиться, что вы можете использовать компонент в своем HTML, а во-вторых, вам нужно иметь возможность ссылаться на этот компонент, чтобы иметь возможность передавать переводы.

Шаг 3 — Передача переводов

Поскольку компонент был зарегистрирован и назначен переменной (может быть let или даже const вместо var), теперь вы можете обращаться к свойствам данных этого компонента.

«Основной» div регистрируется как элемент, в который будет загружаться компонент. «vue-form-component» — это имя созданного компонента. «title» — это свойство данных, а ref — «ссылочное имя», которое можно использовать в вашем JavaScript или TypeScript (main.js — это файл, содержащий создание и регистрацию).

Внизу массив объектов назначается свойству «ml» с двумя свойствами для каждого объекта, каждое из которых названо соответствующим образом, но вы можете назвать их как угодно, если вы затем соответствующим образом измените функцию фильтра.

Конечно, они выглядят как фиксированные значения, но, например, в своих профессиональных проектах я использую HTML-расширение MVC, такое как @Html.Translation («число»), что означает, что правильный перевод будет получен из нашей базы данных (с использованием заданного языка). так что один или ваши добавленные объекты могут выглядеть так:

{ имя: «label.number», значение: «@Html.Translation («номер»)» }

Убедитесь, что строки, возвращаемые из вашей базы данных, закодированы, так как они будут использоваться в сценариях (одинарные/двойные кавычки).

После передачи переводов в указанное свойство многоязыковые метки становятся известными в вашем компоненте и доступны для поиска с помощью функции фильтра.

Результат

В отрендеренном HTML были переведены только вторая и третья метки, в то время как первая метка, поскольку для нее не было перевода в «ml»-списке, отображает только свое значение по умолчанию (строка перед символом вертикальной черты).

И это все.

Спасибо авторам плагина и авторам статей, которые подтолкнули меня в правильном направлении, и спасибо мне за то, что я нашел сносное решение, чтобы я мог снова спать по ночам (да, эти типы вещи меня держат!)

Спасибо за чтение!

PS: это решение, поэтому я думаю, что это не решение, поэтому, если есть лучшие решения для этого сценария, поделитесь своим в разделе комментариев.

РЕДАКТИРОВАТЬ: Internet Explorer может стать настоящей головной болью для веб-разработчиков. Это снова так, потому что он не поддерживает метод array.find(). Для этого внедрите скрипт pollyfill (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) куда-нибудь в свой JS, и все готово. Или используйте lodash (https://lodash.com).

РЕДАКТИРОВАТЬ 2: Поскольку я все еще изучаю входы и выходы Vue, я узнал о глобальных фильтрах и подумал, что это здорово. Для этого я попытался реализовать это для своих переводов, и это сработало как шарм! Что я сделал, так это создал новый файл с именем «component-filters.ts» со следующим кодом:

И добавьте этот скрипт-файл в бандл:

Затем просто удалите фильтр «перевод» из компонента, и все продолжит работать.