Я хочу узнать, возможно ли избежать использования v-if ... v-if ... v-if ... v-else при рендеринге моих элементов в компоненте.
Моя проблема: Я хочу перевести слова с английского sh на выбранный язык, например, у меня есть список языков на выбор и набор слов, собака, кошка и т.д. c. Теперь, если пользователь выбирает нидерландский язык, слово собака должно быть переведено на нидерландский язык, а если пользователь выбирает итальянский, слово должно быть переведено на итальянский.
В настоящее время: Я получаю свои слова в их разные языки из моего магазина в качестве объекта.
dog: {
en: 'dog',
de: 'hond',
es: 'perro'
},
cat: {
en: 'cat',
de: 'kat',
es: 'gata'
}
В общем, я подумал, может быть, если бы я мог сделать что-то вроде этого:
<div v-for="(animal, index) in animals" key="index" LANG="en">
{{ animal.LANG }}
</div>
И при этом, если я изменю LANG с 'en' на 'de' он изменится на голландский. Ну, я знаю, что это невозможно ...
Что мне нужно: В основном мне нужно решение, в котором я могу изменить отображаемое слово при смене языка. Либо после связывания данных, либо, возможно, путем изменения данных с того, что я получаю, на что-то вроде этого ...
{
en: {
dog: 'dog',
cat: 'cat'
},
de: {
dog: 'hond',
cat: 'kat'
},
es: {
dog: 'perro',
cat: 'gata'
}
}
Или любой другой вариант, который будет работать, не выполняя кучу операторов if для выполнения условия рендеринг.
Заранее спасибо.