Vue I18n HTML 插值

Question

我在带有翻译的 json 文件中有一个包含所有产品功能的数组。 en.json 中的每个语言环境字符串都有部分字符串以某种方式突出显示，例如 bold 或 italic。

{
  "feature1": "bla bla bla <b>blabla</b> bla ... bla bla",
  "feature2": "<i>bla</i> bla <b>bla bla bla</b> bla ... <b>bla bla</b>"
}

我想在列表中呈现它们，但不使用 v-html，因为不推荐。

我尝试了component interpolation，但它没有帮助，我尝试将<b> 和<i> 放在一个命名插槽中，但它不起作用，因为我试图将开始和结束标签放在不同的命名插槽中导致无效的 HTML 标记。

{
  "feature1": "bla bla bla {b}blabla{bclose} bla ... bla bla",
  "feature2": "bla bla {b}bla bla bla{bclose} bla ... {b}bla bla{bclose}"
}

<template>
  <i18n
   tag="li"
   v-for="feature in $i18n.messages.en.features"
   path="features"
  >
    <template v-slot:b>
      <b>
    </template>
    <template v-slot:bclose>
      </b>
    </template>
    ...
  </i18n>
</template>

我试图达到的最终结果将如下所示

• bla bla bla blabla bla ... bla bla
• bla bla bla bla bla bla ... bla bla

不使用v-html，我怎么能实现我想要实现的目标？

Answer 1

您应该这样做的方法是将所有 HTML 保留在 <template> 块中，并将所有文本保留在 i18n 中，并且您必须将 HTML 块中的这些字符串分开为单独的翻译：

<i18n tag="li" path="features">
  <b>{{ $t('bla bla') }}</b>
</i18n>

{
  "features": "lorem ipsum {0} ...",
  "bla bla": "bar baz"
}

这会导致：

<li>lorem ipsum <b>bar baz</b> ...</li>

不幸的是，你需要bla bla 作为单独的词，但你需要它作为独立的块，你不能只是将 HTML 开始和结束标签转置到你的字符串中，因为这与不安全字符串相同插值。

Answer 2

如果您使用受信任的内容，我认为使用v-html 指令不是问题，例如，您的 i18n 文件由您控制并由您托管。大多数 XSS 攻击或问题来自第三方请求，您的情况似乎并非如此。您可以阅读有关此指令和 XSS here 的更多信息。

如果你有兴趣使用它，你可以按照这里的建议去做，基本上是you have to sanitize the content first。