Vue-i18n在命名参数中使用HTML

Question

假设我有这个消息对象：

{greetings: '{blah} is welcome'}

如何将HTML注入{blah} param？

我试过这个，但它不起作用：

{{ $t('greetings', {blah: '<foo>' + some_string + '</foo>'}) }}

Answer 1

你必须告诉我你在尝试用这条消息做什么，只要在HTML中显示它，但是在第一次通过时它似乎就像你想要的那样

this.msg = '<foo>' + some_string + '</foo>';

然后，在您要显示此消息的HTML中，您会说：

{{{ msg }}}

注意三个括号，这意味着它将msg解释为原始HTML而不是转义字符串...请谨慎使用。如果msg纯粹是由前端设定的东西那么它就没事了;只是不要让some_string成为用户输入的数据。

Answer 2

对于Vue 2.0，things have changed：

如果您的消息对象是：

{greetings: '<foo>{blah}</foo> is welcome'}

然后在模板方面，您应该具有以下内容：

<p v-html="$t('greetings', {blah: some_string})"></p>

也适用于<div v-html="..."></div>，当然还有其他标签。见https://github.com/kazupon/vue-i18n/issues/73

Answer 3

请谨慎对待[先前]接受的答案，因为不受信任的输入将导致XSS漏洞。正确的方法是使用component interpolation。它的工作原理有点像插槽。

这是一个实际的示例，它在用户名周围包裹了一个链接：

const messages = { 
  welcome: 'Welcome, {user}!' 
};

<i18n
  path="welcome"
  tag="p"
>
  <a place="user" :href="user.link">{{ user.name }}</a>
</i18n>

这将导致以下输出：

<p>Welcome, <a href="/users/bob">Bob Marley</a>!</p>

为便于理解，请注意：

• path属性是消息密钥。
• place属性占位符。
• tag属性确定要呈现的元素类型。
• 对于多个占位符，只需添加更多具有适当的place属性的元素即可。

如果您对<i18n>组件感到好奇，则不必显式启用它-在初始化vue-i18n时会对其进行注册。

Answer 4

您可以使用：

$t('greetings', {blah: some_string})

在他们的en.json中

{
greetings: '<foo>{blah}</foo> is welcome'
}

Answer 5

为什么不直接在 json 中使用 html 标签而不是模板。 这是我在解决方案中将不同布局句子结构的动态参数与html标签的组合

<块引用>

en.json

"Accept_Terms": "Do you accept the <b>{0}</b> and <span class="something">{1}</span> ?",
"Terms":"Terms",
"Conditions":"Conditions"

<块引用>

tr.json

"Accept_Terms": "<b>{0}</b> ve <span class="something">{1}</span> kabul ediyor musunuz ??",
"Terms":"Şartları",
"Conditions":"Kullanım koşullarını"

<块引用>

component.vue

 <p v-html=" $t('Accept_Terms', [
          $t('Terms'),
          $t('Conditions')
       ])">
</p>

“terms”和“conditions”属性根据语言而变化，因此我可以使用任何html标签将句子序列管理为定义的语言

<块引用>

在组件中

$t("message", [$t("paramater_1"),$t("parameter_2")])

<块引用>

在json文件中

"message" : "some text {0} some text with html {1}....."