Vue i18n translate — Как добавить список ul / ol

#javascript #vue.js #vuejs2 #vue-component #translation

#javascript #vue.js #vuejs2 #vue-компонент #перевод

Вопрос:

в моем приложении у меня будет большой информационный блок с большим количеством текста. Они часто будут в нумерованном списке. Я хотел бы найти для них самый простой способ, чтобы я мог легко отправлять их от разработчика копирайтеру. Есть ли какой-нибудь разумный способ создать список HTML (ul или ol) с использованием vue i18n, не разбивая его на несколько переменных в сообщении. Я хотел бы использовать, например, компонентную интерполяцию, но вызываю ее только один раз: <i18n path="info" tag="li"> . Быстрый код, чтобы показать, что я имею в виду:

 //translate.js (fragment)

   const messages = {
  en: {
    sample: 'Sample text with numbered list. 1) Find the problem 2) Ask on Slack 3) Solve the problem 4) Keep happy with vue'
  }
}

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

//App.vue (fragment)
  <ul>
    <i18n path="sample" tag="li">
    </i18n>
    </ul>
  

Я бы хотел, чтобы текст в «образце» был разделен на подпункты. Меня волнует любой способ, это не обязательно должна быть интерполяция компонентов.

Ответ №1:

Вы можете использовать массив в своей локализации, как показано в руководстве — https://kazupon.github.io/vue-i18n/guide/messages.html

Затем вы можете создать шаблон следующим образом:

     <ul>
    <i18n v-for="(item,index) in NumberedList" :key="index" :path="`sample[${index}]`" tag="li" />
    </ul>