【问题标题】:Adding hyperlink with href to named formatting I18n vuejs将带 href 的超链接添加到命名格式 I18n vuejs
【发布时间】:2021-11-26 17:15:39
【问题描述】:

我查看了此页面上的 vue 文档以了解如何解决此问题:https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting

我认为我的所有语法都是正确的,并且我已经使用 href 代码尝试了许多不同的场景。

这是我的 json 文件中的英文翻译文件:

"link": {
  "text": "Click this {Url} link."
}

这是来自我的模板:

 {{ $t("Message.link.text", { Url: <a href="https://www.google.com/" target="_blank">www.google.com</a> }) }}

这不起作用,它会在 UI 中显示 {{ $t("Message.link.text", { Url: www.google.com }) }}

感谢我能得到的所有帮助,在此先感谢!

【问题讨论】:

    标签: json vue.js href vue-i18n


    【解决方案1】:

    你不能在 Vue 中输出带有插值的 HTML({{ }} 语法)。您可以为此使用v-html,但这很危险(请参阅the warnings in the docs

    改用Component interpolation

    "link": {
      "text": "Click this {url}.",
      "link": "link",
    }
    

    模板:

      <i18n path="Message.link.text" tag="p">
        <template v-slot:url>
          <a href="https://www.google.com/" target="_blank">{{ $t('Message.link.link') }}</a>
        </template>
      </i18n>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-01-18
      • 2017-03-09
      • 2016-07-03
      • 2020-11-16
      • 1970-01-01
      • 1970-01-01
      • 2015-06-04
      • 2012-06-18
      相关资源
      最近更新 更多