Как получить JSON-объект из файла локализации в VueJS?

Как можно использовать i18n в проекте на vue-js, чтобы при вызове метода t(`tos.fundamentals`) возвращался JSON-объект с абзацами вместо строки "tos.fundamentals" из файла локали en.json?
  • 12 апреля 2024 г. 18:09
Ответы на вопрос 2
Для получения JSON-объекта из файла локализации в Vue.js с помощью i18n вы можете использовать плагин vue-i18n.

Прежде всего, убедитесь, что вы установили vue-i18n в ваш проект:

```
npm install vue-i18n
```

Затем, вы можете создать файл локализации в формате JSON, например, en.json:

```json
{
  "tos": {
    "fundamentals": {
      "title": "Terms of Service",
      "content": "These are the terms of service..."
    }
  }
}
```

В вашем компоненте Vue.js вы можете использовать i18n следующим образом:

```javascript
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: require('./locales/en.json'),
  // другие языки...
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

export default {
  // ваш компонент Vue
  methods: {
    getContent() {
      return this.$t('tos.fundamentals');
    }
  },
  i18n
};
```

Теперь, при вызове метода `this.$t('tos.fundamentals')` в вашем компоненте Vue, будет возвращаться JSON-объект с абзацами из файла локализации en.json, а не просто строка "tos.fundamentals".
на сколько я помню эта либа возвращает не json объекты а строки. 
Соответственно тебе нужно в шаблоне указать ключ, по которому будет возвращено значение соответствующего языка

<div>
   <h3>{{ t(`tos.fundamentals.['1'].title`) }}</h3>
   <p>{{ t(`tos.fundamentals.['1'].body`) }}</p>
</div>
Похожие вопросы