Vue i18n 翻译 - 如何添加 ul/ol 列表答案

【问题标题】：Vue i18n translate - How add ul/ol listVue i18n 翻译 - 如何添加 ul/ol 列表
【发布时间】：2020-10-27 10:08:20
【问题描述】：

在我的应用程序中，我将有一个包含大量文本的大型信息框。它们通常会出现在编号列表中。我想为他们找到最简单的方法，以便我可以轻松地将它们从开发人员发送给文案。有没有什么聪明的方法可以使用 vue i18n 创建 HTML 列表（ul 或 ol），而不会将其分解为 message.xml 中的多个变量。我想使用例如Component interpolation，但只调用一次：<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>

我希望将“示例”中的文本除以子点。我关心任何方式，它不一定是组件插值。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component translation

【解决方案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>

【讨论】：