Как не показывать элемент, если перевода не существует (i18n с Vue/Nuxt)?

Question

[riddlr]

Вопрос об vue-i18n либо модуле nuxt-i18n

Если перевода данных не существует, как не показывать вообще ничего?

Просто отключение fallbackLocale все равно показывает название ключа, вместо данных.

Например

<h3>{{ $t('anotherMessage') }}</h3>

Это существует только на англ. Если я переключу на другой язык браузер показывает мне anotherMessage. Нафига, блин? Я не хочу ничего показывать.

Может есть способ проверки существует ли перевод? Но это тоже плохой вариант, цеплять v-if каждому элементу с локализацией выглядит полным идиотизмом.

Comments

[Алексей Ярков]

Но это тоже плохой вариант, цеплять v-if каждому элементу с локализацией выглядит полным идиотизмом.

Тем не менее это единственный вариант. По крайней мере мне в свое время не удалось это победить. Придется лепить проверки типа такого:

<h3 v-if="'anotherMessage' in i18n.messages">{{ $t('anotherMessage') }}</h3>

[riddlr]

Алексей Ярков, Cannot read property 'messages' of undefined

В принципе, такой костыль пока сойдет. Но увы не работает.

[riddlr]

Алексей Ярков, вот так работает!

v-if="'anotherMessage' in $i18n.messages[$i18n.locale]"

Спс! Можете вынести ответом, отмечу решением

[Алексей Ярков]

riddlr, пожалуйста )) Вынес в ответы.

Answer 1

[Алексей Ярков]

Но это тоже плохой вариант, цеплять v-if каждому элементу с локализацией выглядит полным идиотизмом.

Тем не менее это единственный вариант. По крайней мере мне в свое время не удалось это победить. Придется лепить проверки типа такого:

<h3 v-if="'anotherMessage' in i18n.messages">{{ $t('anotherMessage') }}</h3>

UPD: Рабочий вариант:

v-if="'anotherMessage' in $i18n.messages[$i18n.locale]"